HTML5拖放结束事件立即触发问题

Question

我有几个可拖拽的元素

<div Class="question-item" draggable="true">Box 1: Milk was a bad choice.</div>
<div class="question-item" draggable="true">Box 2: I'm Ron Burgundy?</div>
<div class="question-item" draggable="true">Box 3: You ate the entire wheel of cheese?     </div>
<div class="question-item" draggable="true">Box 4: Scotch scotch scotch</div>

我有以下事件处理程序：

var $questionItems = $('.question-item');

$questionItems
  .on('dragstart', startDrag)
  .on('dragend', removeDropSpaces)
  .on('dragenter', toggleDropStyles)
  .on('dragleave', toggleDropStyles);


function startDrag(e){
  console.log('dragging...');
  addDropSpaces();
  e.stopPropagation();
}

function toggleDropStyles(){
  $(this).toggleClass('drag-over');
  console.log(this);
}


function addDropSpaces(){
  $questionItems.after('<div class="empty-drop-target"></div>');
}

function removeDropSpaces(){
  console.log("dragend");
  $('.empty-drop-target').remove()
}

为什么只有第一个可拖动元素有效。如果我拖动最后一个可拖动元素，则会立即触发dragend事件。(顺便说一句，我不想使用jQuery UI)

这对我来说毫无意义 - 看起来像是一个bug。

我在OSX上使用Chrome v 30。

这是JSFiddle的链接：http://jsfiddle.net/joergd/zGSpP/17/ （编辑：这是以下问题的重复：当我拖动时，dragend、dragenter和dragleave立即触发 - 但我认为原始作者可以使用jQuery UI，而我希望使用HTML5本机方法）

- Joerg

Answer 1

正如我在这个话题 dragend, dragenter, and dragleave firing off immediately when I drag 中提到的那样，解决了这个问题（看起来是Chrome的一个bug）的方法是在处理程序中添加10毫秒的setTimeout，并在该超时时间内操作DOM。

- Ivan Koshelev

---

为了可能缩小问题范围，我在我的情况下观察到（React，Redux操作导致子树折叠），只有在滚动条在DOM修改后达到底部的情况下才会出现此问题，这会导致拖动位置相对于容器跳转到不同的位置。我假设浏览器引擎认为这是一种不一致性并取消了拖动操作，这可以解释行为和解决方法。以相同方式但稍后修改DOM是正常的鼠标移动。我假设如果修改在拖动项上方完成，情况也将发生。 - martinh_kentico

我发现将超时时间设置为0甚至也可以工作。 - W Biggs

Answer 2

我没有直接的解决方案，但是在dragStart事件处理程序中更改DOM会导致这个问题，任何改变DOM的代码都应该放在dragEnter事件处理程序中 - 这样做可以更加可靠地触发拖放事件。

不确定这是否是设计上的问题 - 感觉有点像一个 bug。

- Joerg

Answer 3

这是一个已知的Chrome问题。问题在于，正如Joerg所提到的，您在dragstart时操作了dom。

您可以这样做，但需要在timeout中执行。

- user1351905

Answer 4

我刚遇到了同样的问题。我在拖动开始时通过改变元素位置为fixed来操作DOM。我使用Ivan的答案解决了我的问题，代码如下：

/* This function produced the issue */
function dragStart(ev) {
    /* some code */
    myElement.style.position="fixed";
}

/* This function corrected issue */
function dragStart(ev) {
    /*some code */
    setTimeout(function changePos() {
        myElement.style.position="fixed";
        }, 10);
}

似乎你问题的答案是：

function startDrag(e){
  console.log('dragging...');
  setTimeout(addDropSpaces(),10);
  e.stopPropagation();
}

- Cody Rowley