36

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

ps 我真的很想使用 html5 拖放 API，而不是 jQuery-sortable()

4

4 回答 4

71

我试图让这个示例尽可能简单。

如果您创建一个 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上尝试代码

请注意 FireFox 中的以下错误： https ://developer.mozilla.org/en-US/docs/Web/Events/dragenter

希望这可以帮助。

于 2015-03-10T11:16:41.910 回答
8

有关从头到尾的教程，请查看：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/。

于 2012-07-05T22:40:50.593 回答
6

如果您希望对表格行执行此操作，则需要稍作更改：

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';
}
于 2015-11-19T01:36:29.793 回答
2

如果您使用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"属性。

于 2016-11-26T15:26:50.097 回答