Javascript 在拖放组件时，它会在可拖放上多次添加该组件

我使用的是自定义助手方法，它返回一个

，在删除该

并多次添加它时返回。请看代码以便更好地理解它

var dropHelp = true;


$(".product").draggable({
revert: 'invalid',
cursorAt: { top: -12, left: -20 },
 connectToSortable: ".droppable",
helper: function(event) {
  return $('<div class="helper">Helper</div>');
}
});
$(".droppable").sortable({
  placeholder: "ui-state-highlight"
}).disableSelection();
$(".droppable").droppable({
drop: function(event, ui) {
    if(dropHelp){
       //clone and remove positioning from the helper element
       var newDiv = $(ui.helper).clone(false)
           .removeClass('ui-draggable-dragging')
           .css({position:'relative', left:0, top:0});            
       $(this).append(newDiv);

    //drop the draggable source element
    } else {
       $(this).append(ui.draggable);
    }
 }
 });

$('#dropDrag').click(function(){
dropHelp = !dropHelp;
});

var-dropHelp=true；
$（“.product”）.draggable({
还原：“无效”，
光标：{顶部：-12，左侧：-20}，
connectToSortable:“.droppable”，
助手：函数（事件）{
返回$（'Helper'）；
}
});
$（“.droppable”）.sortable({
占位符：“ui状态突出显示”
}).disableSelection（）；
$（“.droppable”）.droppable({
drop：函数（事件、用户界面）{
if（dropHelp）{
//克隆并删除辅助元素中的定位
var newDiv=$（ui.helper）.clone（false）
.removeClass（'ui-draggable-dragging'）
.css（{位置：'relative'，左：0，上：0}）；
$（this）.append（newDiv）；
//删除可拖动的源元素
}否则{
$（this.append）（ui.draggable）；
}
}
});
$（'#dropDrag'）。单击（函数（）{
dropHelp=！dropHelp；
});

这是HTML

<button id="dropDrag">Toggle drop "Helper" or "Draggable"</button><br/><br/><br/>

<div class="product">Product 1</div>
<div class="product">Product 2</div>
<div class="product">Product 3</div>

<div class="droppable">Drop Target</div>

切换下拉“Helper”或“Draggable”



产品1
产品2
产品3
下降目标

完整的代码可以找到

我发现，如果我们删除DragTable中的

connectToSortable

属性，它将正常工作。但是我需要这个属性，我不知道当设置了

connectToSortable

时它为什么会这样运行

您的

drop（）

会被调用两次，因为

connecttoportable

也会触发

drop（）

。 （可排序已经是可拖放的）

我已经编辑了您的代码，以获得与sortable的

receive

功能相同的结果

var dropHelp = true;


  $(".product").draggable({
    revert: 'invalid',
    cursorAt: { top: -12, left: -20 },
     connectToSortable: ".droppable",
    helper: function(event) {
      return $('<div class="helper">Helper</div>');
    },
      stop: function(){
        $(this).css({opacity:1});
    },
       start: function(){
        $(this).css({opacity:0});
    },
  });
  $(".droppable").sortable({
      placeholder: "ui-state-highlight",
      receive: function(event, ui) {
          if(dropHelp){
           //clone and remove positioning from the helper element
           var newDiv = $(ui.helper).clone(false)
               .removeClass('ui-draggable-dragging')
               .css({position:'relative', left:0, top:0});            
           $(this).append(newDiv);

        //drop the draggable source element
        } else {
           $(this).append(ui.draggable);
        }

  }
  }).disableSelection();


$('#dropDrag').click(function(){
    dropHelp = !dropHelp;
});

var-dropHelp=true；
$（“.product”）.draggable({
还原：“无效”，
光标：{顶部：-12，左侧：-20}，
connectToSortable:“.droppable”，
助手：函数（事件）{
返回$（'Helper'）；
},
停止：函数（）{
$（this.css（{opacity:1}）；
},
开始：函数（）{
$（this.css（{opacity:0}）；
},
});
$（“.droppable”）.sortable({
占位符：“ui状态突出显示”，
接收：功能（事件、用户界面）{
if（dropHelp）{
//克隆并删除辅助元素中的定位
var newDiv=$（ui.helper）.clone（false）
.removeClass（'ui-draggable-dragging'）
.css（{位置：'relative'，左：0，上：0}）；
$（this）.append（newDiv）；
//删除可拖动的源元素
}否则{
$（this.append）（ui.draggable）；
}
}
}).disableSelection（）；
$（'#dropDrag'）。单击（函数（）{
dropHelp=！dropHelp；
});

值得一提的是，排序表已经是可拖放的，我们没有明确声明它……为什么它既添加了帮助程序，又添加了我们拖动的原始组件？虽然我们只是在接收函数中添加帮助程序。@Ashok您的可拖动程序连接到一个也可拖动的可排序程序。你因为这个打了两次电话给droppable。现在，在你的接收函数中，你也在管理拖动事件。谢谢@faby，我知道了为什么它会这样。你知道在这种情况下我们如何避免打电话给drop吗。所以，实际的父母不应该被添加到“可拖放”中。@Ashok我不太明白你在问我什么。你会采取哪种正确的行为？您不想在sortable中添加帮助程序？我的回答解决了您的问题吗？