拖动时，dragend、dragenter和dragend会立即触发
拖动时，dragend、dragenter和dragend会立即触发
提问于 2013-01-08 04:44:58
我正在尝试创建一个元素列表，这些元素可以通过拖放来重新定位。第一个元素，Box 1，在100%的情况下都工作得很好。有时第二个盒子可以工作，但其他盒子都不能像预期的那样工作。它们似乎会在您一开始拖动它们时立即触发所有的拖动事件。
我正在使用最新的Chrome (v23)，如果有关系的话。
var $questionItems = $('.question-item');
$questionItems
.on('dragstart', startDrag)
.on('dragend', removeDropSpaces)
.on('dragenter', toggleDropStyles)
.on('dragleave', toggleDropStyles);
function startDrag(){
console.log('dragging...');
addDropSpaces();
}
function toggleDropStyles(){
$(this).toggleClass('drag-over');
console.log(this);
}
function addDropSpaces(){
$questionItems.after('<div class="empty-drop-target"></div>');
console.log('drop spaces added');
}
function removeDropSpaces(){
$('.empty-drop-target').remove();
console.log('drop spaces removed');
}下面是HTML：
<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>下面是我的代码的jsFiddle：http://jsfiddle.net/zGSpP/5/
回答 6
Stack Overflow用户
发布于 2013-12-23 04:42:09
刚才有这个问题-这是一个Chrome bug，你不能在dragStart事件中操作DOM，否则dragEnd会立即触发。我的解决方案是-使用setTimeout()并在您超时的函数中操作DOM。
Stack Overflow用户
发布于 2013-01-08 05:15:50
Stack Overflow用户
发布于 2013-10-29 23:52:37
我不确定这是否是一个bug，但我认为问题出在您更改dragstart处理程序中的DOM时。我认为第一个框起作用的原因与它的位置在DOM中其他框之前的事实有关，并且当您更改DOM时，位置(?)第一个事件不受影响，拖放事件可以可靠地触发。
您需要在一定程度上重构代码，并在dragenter事件处理程序中添加dropSpaces。不过，您需要更改您的addDropSpaces方法，以适应它将被多次调用的事实。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14203734
复制相关文章
相似问题