拖放事件触发两次

Posted 2023-05-08

【中文标题】拖放事件触发两次

【英文标题】：drag and drop event fires twice

【发布时间】：2016-03-27 00:22:44

【问题描述】：

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

$('.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",
 );

See DEMO

【问题讨论】：

见***.com/questions/2678598/…

【参考方案1】：

这是一个 jQuery UI 错误。一个简单的解决方法是使用 sortable receive event 而不是可丢弃的 drop 事件。这样做时，事件只会触发一次。

Updated Example

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

【讨论】：

此解决方案有效，但问题是我必须将一堆 div 代码添加到下拉列表中，通过使用此代码将 div 添加到拖动列表而不是下拉列表，我将此代码复制到 wordpress 并添加 div html 到拖动列表而不是下拉列表。