HTML5拖动事件立即启动

Question

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

为什么它仅适用于第一个拖动。如果我拖动最后一个拖动 - 拖动事件会立即触发。 （我不想使用jQuery ui btw）对我来说毫无意义 - 看起来像一个错误。

IAM ON Chrome v 30上的OSX。

HERH是JSFIDDLE的链接：

Http：//jsfiddle.net/joergd/zgspp/17/

（编辑：这是以下问题的重复：dragend，dragenter和DragLeave在我拖动时立即开火 - 但是我认为原始海报可以与JQuery UI一起使用，而我希望它是HTML5本机）

当我在主题中提到的

dragend，dragenter和dragleave当我拖动时立即开火。该超时的DOM。

我没有直接的解决方案，但是更改DragStart事件处理程序中的DOM正在引起此问题，并且任何更改DOM的代码都应真正在Dragenter事件处理程序中进行 - 这样做，更可靠地触发了Drag＆Drop事件。

不确定这是否是设计 - 感觉有点像一个错误。

这是一个已知的镀铬问题。问题是，正如Joerg提到的那样，您在Dragstart上操纵了DOM。 您可以这样做，但是您需要在超时。

Answer 1

例如

const dragstart = (event: DragEvent) => {
    event.dataTransfer!.setDragImage(image, 0, 0);

    setTimeout(() => {
        // mutate dom here
    }, 0);
};

Answer 2

/* 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();
}

Answer 3