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

将项目拖出可放置区域时删除项目

1 个答案: