javascript - 将项目拖出可放置区域时将其移除

Question

我有 2 个盒子，用户可以在其中放置元素。你可以测试一下here 。 这就是我的可放置区域的样子:

$(".projLeader ol, .projChecker ol").droppable({ 
tolerance: 'pointer', 
hoverClass: 'highlight',
    drop: function(ev, ui)
    {
         var zz = ui.draggable.text()
         var xyz = itm.includes(zz);

          var item = ui.draggable;
          if (!ui.draggable.closest('.placeholder').length) item = item.clone().draggable();// if item was dragged from the source list - clone it
          //this.innerHTML = '';                                                                                // clean the placeholder
          item.addClass('dropClass').appendTo(this); 
          // append item to placeholder   
          //add to array
          itm.push(zz);
          var n = $(this).closest("div.proc").find(".dropClass").length;
          $(this).closest("div.proc").find("h6").text("Items Dropped: " + n + ".");


    }
});

问题是当我拖出元素并将其留在可放置区域之外时它仍然在那里，如何使其消失或返回到原来的可放置区域。我的意思是，如果用户将其拖出并将其留在可放置区域之外，则项目应该返回可放置区域。当我将项目从 box1 拖动到 box2 时，我遇到了另一个问题，它重复而不是在 box2 内。如何修复？感谢您的帮助

Answer 1

如果您想删除拖出可放置区域的元素，请尝试此代码

   $('#someID').droppable({
   out: function(event, ui) {
      $(ui.draggable).remove();
    }
   });

或者检查这个问题Remove Item On Drop