删除拖放后的可拖动元素

基本上我所拥有的是一套小玩意儿 ，我需要做的是能够将该组中的任何项目拖动到收容箱中。 一旦它们进入盒子，它们仍然可以自由移动和操纵，但是它们不能再被取出，尽管它们可以被删除。

小玩意儿也被设置为克隆，因为如果用户愿意，用户可以拥有多个项目。

所以这两个部分，设置了doodad列表（已经完成），然后使其可拖动，以便可以将其拖入droppable div框。 然后第二部分是，一旦它在div框中，它必须再次可拖动，不能克隆，并且也包含在框中。

这是我的JS代码：

$(document).ready(function() { function MakeDraggable(item) { item.draggable({ revert : "invalid" }); } $(".doodad").draggable({ helper : 'clone', scroll : true }); $(".dropped").draggable ({ containment: ".box" }); $(".box").droppable({ accept : ".doodad", activeClass : "ui-state-default", hoverClass : "ui-state-hover", drop : function(event, ui) { var droppedItem = $(ui.draggable).clone(); //droppedItem.class = ".dropped"; droppedItem.draggable(); //ui.draggable.draggable('option', 'revert', false); //droppedItem.draggable(); $(this).append(droppedItem); } }); 

}）;

我尝试了很多东西。 我尝试将元素的ID更改为其他内容，以便它可以采用该类的可拖动属性。 我也试过在drop函数中编程，但是我遇到了问题。

我不知道如何引用刚刚丢弃的可拖动元素来操纵它。 我被告知它是$(ui.draggable)或$(ui.draggable).clone() ，但是当我尝试引用它并使用我想要的选项调用draggable时，它不起作用。 我得到的最好的是它在掉落之后是可拖动的，但是它一直在复制并且没有被包含在盒子里。

任何帮助将不胜感激，我是所有这些东西的新手。 我确实看过JQuery API，但在这方面它对我没什么帮助。

编辑：

我的Html是：

CSS是：

 .box { width:500px; height:500px; background: orange; } 

Answer 1

您可以在已删除的元素上设置一个类，例如copied然后检查已删除的元素是否已经是该类，如果是，则停止克隆。

要限制框内的移动，您可以使用draggable的containment选项：

约束拖动到指定元素或区域的范围内。

码：

 $(document).ready(function () { $(".doodad").draggable({ helper: 'clone', scroll: true }); $(".dropped").draggable({ containment: ".box" }); $(".box").droppable({ accept: ".doodad", activeClass: "ui-state-default", hoverClass: "ui-state-hover", drop: function (event, ui) { if ($(ui.draggable).hasClass('copied')) return var droppedItem = $(ui.draggable).clone().addClass('copied'); droppedItem.draggable({ containment: ".box" }); $(this).append(droppedItem); } }); }); 

演示： http ： //jsfiddle.net/IrvinDominin/ufHMm/

编辑

为了获得被删除的元素位置，我们必须计算并使用它，使用：

 $(ui.helper).position().top - $(this).position().top $(ui.helper).position().left - $(this).position().left 

我们沿着它的容器获得帮助位置。

最终代码：

 $(document).ready(function () { $(".doodad").draggable({ helper: 'clone', scroll: true }); $(".dropped").draggable({ containment: ".box" }); $(".box").droppable({ accept: ".doodad", activeClass: "ui-state-default", hoverClass: "ui-state-hover", drop: function (e, ui) { if ($(ui.draggable).hasClass('copied')) return var droppedItem = $(ui.draggable).clone().addClass('copied').css({ position: "relative", top: $(ui.helper).position().top - $(this).position().top, left: $(ui.helper).position().left - $(this).position().left }).draggable({ containment: ".box" }); $(this).append(droppedItem); } }); }); 

演示： http ： //jsfiddle.net/IrvinDominin/ufHMm/3/