拖放事件触发两次

Question

我正在编写一个脚本，其中在拖放列表项时遇到了问题。当我将项目拖入可放置区域时，事件会触发两次。这是我的代码。查看代码。

$('.draglist div').draggable({        
    cursor: 'move',
    helper: 'clone',
    connectToSortable: '.droplist'
}); 
$(".droplist").droppable({
drop: function (event, ui) {
  var dragtext = $(ui.draggable).text();
  alert(dragtext);
}
});
$('.droplist').sortable({
     opacity: 0.6,
     revert: true,
     cursor: 'move',
     placeholder: "highlight",
 });

查看演示

- btechguy

---

请参见http://stackoverflow.com/questions/2678598/jquery-draggable-get-its-content-js-fired-twice。 - ROMANIA_engineer

Answer 1

这是一个jQuery UI的bug。一个简单的解决方法是使用sortable receive事件而不是droppable drop事件。这样做，事件只会被触发一次。 更新示例

$(".droplist").droppable().sortable({
  opacity: 0.6,
  revert: true,
  cursor: 'move',
  placeholder: "highlight",
  receive: function(event, ui) {
    var dragtext = $(ui.item[0]).text();
    alert(dragtext);
  }
});

- Josh Crozier

---

这个解决方案可行，但问题在于我必须向下拉列表中添加一堆div代码，使用此代码会将div添加到拖动列表而不是下拉列表，我正在将此代码复制到WordPress中，它会将div HTML添加到拖动列表而不是下拉列表。 - btechguy