javascript - 在删除一个组件时，它会在可删除组件上多次添加它

Question

我正在使用自定义辅助方法，该方法返回 <div> ，在删除 <div> 时它添加了不止一次。请看代码以便更好地理解

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

这是 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>

完整代码可见here .

我发现我们是否删除 connectToSortable属性在draggable中它会工作得很好。但我需要该属性，但我不明白它在 connectToSortable 时出现这种行为的原因。已设置。

Answer 1

您的 drop() 被调用两次，因为 connectToSortable 也触发了 drop()。(Sortable 已经是 droppable)

我已经编辑了您的代码，以获得与可排序的receive函数相同的结果

<强> DEMO

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