Javascript HTML5拖放教程；下拉列表

有人知道一个真正好的HTML5拖放教程吗？我正在制作一个待办事项列表，我希望能够使用此API对其进行重新排序/排序。我一直像疯子一样在谷歌上搜索，现在我开始放弃了。。。欢迎任何提示！ 谢谢

---

p、 s我真的想使用html5拖放API，而不是jQuery-sortable（）

对于从开始到结束的教程，请查看以下内容：

---

它基于html5sortable：。关于HTML5拖放的另一个很好的教程可以在这里找到：。

我已经尽力使这个示例尽可能简单

如果创建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>

。。。你应该得到一个可排序的列表

您可以在上尝试该代码

请注意FireFox中的以下错误：

---

希望这能有所帮助。

如果您希望对表行执行此操作，则需要做一些轻微的更改：

苹果
A列2
橘子
O柱2
香蕉
B列2
草莓
S柱2
var源；
函数isbefore（a，b）{
if（a.parentNode==b.parentNode）{
for（变量cur=a；cur；cur=cur.previousSibling）{
如果（cur==b）{
返回true；
}
}
}
返回false；
}
功能性疏水剂（e）{
var targetelem=e.target；
if（targetelem.nodeName==“TD”）{
targetelem=targetelem.parentNode；
}  
if（isbefore（source，targetelem））{
targetelem.parentNode.insertBefore（源，targetelem）；
}否则{
targetelem.parentNode.insertBefore（源，targetelem.nextSibling）；
}
}
函数dragstart（e）{
来源=目标；
e、 dataTransfer.effectAllowed='move'；
}

如果您使用adamf的解决方案（2015年3月10日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元素，而不应用其任何子元素

如果li元素有子元素，同样的事情也适用于ul>li结构

---

如果有img子元素，则为每个元素添加一个draggable=“false”属性。

为什么不直接查找此项？谷歌的第一个结果涵盖了你所需要的一切…我有。但我就是找不到一个能很好地解释基本原理的好方法。（是的，我对javascript很陌生）要找到这些信息仍然非常困难。现在是2018年，我们还在到处使用jQuery sortable吗？？有很多HTML5拖放教程，但没有涉及到重新排序。我知道这是一个令人难以置信的老线程，但请注意，诸如“为什么不只是查找它？谷歌的第一个结果涵盖了你需要的一切”这样的评论不仅没有帮助，而且讽刺的是，这是谷歌的第一个结果。这应该表明这些信息并不像评论者所想的那样普遍。将

e.dataTransfer.setData（'text/plain'，null）

添加到dragstart事件中使其在Firefox上工作。我看起来与此完全一样，但这在移动设备和Ipad上不起作用。我们怎样才能让移动设备也这么做？？？你可以使用“touchstart”。就浏览器而言，触摸事件和鼠标事件应该是分开的。如果你有一台混合型笔记本电脑，你将同时拥有鼠标和触摸输入。然而，我发现在一些桌面浏览器上，使用touchmove事件时会发生奇怪的事情。例如，当您用鼠标单击该对象时，该对象可能会飞离屏幕。总有一天，我相信规格会确定下来，一切都会正常工作。我们只是还不太清楚。isBefore（）函数的用途是什么？它正在遍历所有以前的同级，以查看当前拖动的项是否在其中？请解释…

cur.nodeType！==9可以改为
cur.nodeType！==Node.DOCUMENT\u Node
的可读性。作者不愿意处理jQuery依赖关系。-“不是jQuery-sortable（）”
<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';
}

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);
    }
}