HTML 5 拖拽事件

Question

我正在尝试在JS和HTML中构建可重新排序的列表（尝试不使用jQuery UI）。但是，当拖动列表项时，似乎只有dragstart和dragend事件会触发，我无法弄清楚为什么其他事件没有触发。有人知道原因吗？

<ul>
    <li draggable="true" class="drag">1111111</li>
    <li draggable="true" class="drag">222222</li>
    <li draggable="true" class="drag">333333</li>
    <li draggable="true" class="drag">444444</li>
</ul>

<script type="text/javascript">
    var drags = document.querySelectorAll('.drag');
    [].forEach.call(drags, function(drag) {
      drag.addEventListener('dragstart', handleDragStart, false);
      drag.addEventListener('dragenter', handleDragEnter, false);
      drag.addEventListener('dragover', handleDragOver, false);
      drag.addEventListener('dragleave', handleDragLeave, false);
      drag.addEventListener('dragend', handleDragEnd, false);
    });

    function handleDragStart(e){
        console.log('handleDragStart');
    }

    function handleDragEnter(e){
        console.log('handleDragEnter');
    }

    function handleDragOver(e){
        console.log('handleDragOver');
    }

    function handleDragLeave(e){
        console.log('handleDragLeave');
    }

    function handleDragEnd(e){
        console.log('handleDragEnd');
    }
</script>

- jamie holliday

---

在此处找到一个示例：http://jsfiddle.net/68QJu/ 在Windows上的Chrome中它正在工作（有很多'handleDragOver'），因此要在不同的浏览器中测试它？ - nuala

我在Snow Leopard上用Chrome进行测试。可能只是那里的一个问题。我会检查一下。 - jamie holliday

是的，我刚在OS X上的Chrome 20上测试了它 - 只有开始和结束事件。 - nuala

Answer 1

如其他人已经提到的，它已经在Chrome中工作。在Firefox中，您需要在dragstart上设置dataTransfer，并且您需要执行e.preventDefault()以使元素成为有效的放置目标。之后，一切开始工作：

var drags = document.querySelectorAll('.drag');
[].forEach.call(drags, function(drag) {
  drag.addEventListener('dragstart', handleDragStart, false);
  drag.addEventListener('dragenter', handleDragEnter, false);
  drag.addEventListener('dragover', handleDragOver, false);
  drag.addEventListener('dragleave', handleDragLeave, false);
  drag.addEventListener('dragend', handleDragEnd, false);
  drag.addEventListener('drop', handleDragEnd, false);
});

function handleDragStart(e) {
  console.log('dragstart ' + e.target.innerText);
  e.dataTransfer.setData('text/plain', 'This text may be dragged')
}

function handleDragEnter(e) {
  console.log('dragenter ' + e.target.innerText);
  e.preventDefault();
}

function handleDragOver(e) {
  console.log('dragover ' + e.target.innerText);
  e.preventDefault();
}

function handleDragLeave(e) {
  console.log('dragleave ' + e.target.innerText);
}

function handleDragEnd(e) {
  console.log('dragend ' + e.target.innerText);
  e.preventDefault();
}

<div draggable="true" class="drag">AAAAAA</div>
<div draggable="true" class="drag">BBBBBB</div>
<div draggable="true" class="drag">CCCCCC</div>
<div draggable="true" class="drag">DDDDDD</div>
<div draggable="true" class="drag">EEEEEE</div>

注意：我还添加了一个drop处理程序，以便Firefox在拖放时不会尝试加载URL。

- robertc

Answer 2

使用IE 10没有问题。

我建议使用jQuery UI，它非常简单，并且在所有浏览器中都可以使用：http://jqueryui.com/demos/sortable/

- masipcat

---

谢谢，我知道这一点，但我对如何在没有 jQuery 的情况下使其工作很感兴趣——抱歉我没有提到这一点。 - jamie holliday

这个演示不支持触摸屏幕（但这是jQuery可拖动的问题）。有一些解决方法可以让它工作，但遗憾的是，那样会有点卡顿。 - ProblemsOfSumit