HTML5拖放教程 - 可排序列表
Tutorial for HTML5 drag&drop - sortable list
有谁知道HTML5拖放的非常好的教程吗?我正在制作一个待办事项列表,我希望能够使用此 API 对其进行重新排序/排序。我一直像个疯子一样在谷歌上搜索它,现在我开始放弃......欢迎任何提示!谢谢!
p.s 我真的很想使用 html5 拖放 API,而不是 jQuery-sortable()
我试图使此示例尽可能简单。
如果创建 HTML 列表:
<ul>
<li draggable="true" ondragover="dragOver(event)" ondragstart="dragStart(event)">Apples</li>
<li draggable="true" ondragover="dragOver(event)" ondragstart="dragStart(event)">Oranges</li>
<li draggable="true" ondragover="dragOver(event)" ondragstart="dragStart(event)">Bananas</li>
<li draggable="true" ondragover="dragOver(event)" ondragstart="dragStart(event)">Strawberries</li>
</ul>
。和以下 JavaScript:
var _el;
function dragOver(e) {
if (isBefore(_el, e.target))
e.target.parentNode.insertBefore(_el, e.target);
else
e.target.parentNode.insertBefore(_el, e.target.nextSibling);
}
function dragStart(e) {
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("text/plain", null); // Thanks to bqlou for their comment.
_el = e.target;
}
function isBefore(el1, el2) {
if (el2.parentNode === el1.parentNode)
for (var cur = el1.previousSibling; cur && cur.nodeType !== 9; cur = cur.previousSibling)
if (cur === el2)
return true;
return false;
}
。您应该获得一个可排序的列表。
您可以在 https://codepen.io/crouchingtigerhiddenadam/pen/qKXgap 上尝试代码
请注意火狐中的以下错误:https://developer.mozilla.org/en-US/docs/Web/Events/dragenter
希望这有帮助。
有关从头到尾的教程,请查看以下内容:http://taximeeting.tumblr.com/post/26539340142/lightweight-jquery-plugin-for-html5-sortable-lists。
它基于html5sortable
:http://farhadi.ir/projects/html5sortable/。另一个关于HTML5拖放的精彩教程可以在这里找到:http://www.html5rocks.com/en/tutorials/dnd/basics/。
如果您希望对表格行执行此操作,则需要稍作更改:
https://jsfiddle.net/cmpenney/6rx6u2kf/
<table>
<tr draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">
<td style="border: 1px solid black">Apples</td>
<td style="border: 1px solid black">A-Column2</td>
</tr>
<tr draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">
<td style="border: 1px solid black">Oranges</td>
<td style="border: 1px solid black">O-Column2</td>
</tr>
<tr draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">
<td style="border: 1px solid black">Bananas</td>
<td style="border: 1px solid black">B-Column2</td>
</tr>
<tr draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">
<td style="border: 1px solid black">Strawberries</td>
<td style="border: 1px solid black">S-Column2</td>
</tr>
</table>
var source;
function isbefore(a, b) {
if (a.parentNode == b.parentNode) {
for (var cur = a; cur; cur = cur.previousSibling) {
if (cur === b) {
return true;
}
}
}
return false;
}
function dragenter(e) {
var targetelem = e.target;
if (targetelem.nodeName == "TD") {
targetelem = targetelem.parentNode;
}
if (isbefore(source, targetelem)) {
targetelem.parentNode.insertBefore(source, targetelem);
} else {
targetelem.parentNode.insertBefore(source, targetelem.nextSibling);
}
}
function dragstart(e) {
source = e.target;
e.dataTransfer.effectAllowed = 'move';
}
如果您使用的是 adamf 的解决方案(Mar 10 '15 at 11:16),并且想在表行上使用它,请将 dragenter 函数替换为以下内容:
function dragenter(e) {
var target = e.target;
while (target.parentNode.tagName != 'TBODY') {
target = target.parentNode;
}
if (isbefore(source, target)) {
target.parentNode.insertBefore(source, target);
}
else {
target.parentNode.insertBefore(source, target.nextSibling);
}
}
这样,目标将仅适用于 TR 元素,而不应用于其任何子元素。
同样的事情也适用于 ul> li 构件,如果 li 元素有子元素。
如果有 img 子元素,请为每个子元素添加一个 draggable="false" 属性。
- 为什么HTML5拖放的目标是孩子?(可排序列表)
- jQuery拖动到相对位置的可排序列表中时出现可拖动辅助对象位置问题
- jQuery带计数器的可排序列表
- 我们可以在 CouchDB 中对排序列表视图进行排序吗?
- SharePoint :按日期排序列表
- jQueryUI可排序-从可排序列表中删除li
- Rails3-可排序列表不能与wysihtml5一起工作
- 如何同步包含克隆元素的jquery可排序列表
- 无法将id放在Jquery插件生成的模式中的未排序列表上
- 为未排序列表设置onclick()属性
- Mvc4将Jquery可排序列表项的顺序保持到控制器
- 无法从jQuery可排序列表中删除新添加的项
- iframe内容可编辑,位于jqueryUI可排序列表项中
- 对象的数组列表的Javascript排序列表-基于特定的数组列表
- 动态生成<选择>未显示已排序列表中的第一个项目
- 从 ajax 调用到 jquery UI 可排序列表构建 html
- 使用 jqueryui 的多个可排序列表 - 不希望项目在列表组之间混合
- jQuery - 获取可排序列表的索引
- jQuery - 排序后更新可排序列表
- YUI 轮播导航按钮在排序列表下