使用jQuery UI添加另一个图像后删除克隆的图像

我从上一个问题中得到了一个很好的解决方案，即在删除后成功克隆图像。

这是代码：

$(function() { var makeDraggable = function(element) { element.draggable({ revert: "invalid", appendTo: "#droppable", helper: "clone" }); } $( "#droppable" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", drop: function(event, ui) { var newClone = $(ui.helper).clone(); makeDraggable(newClone); $(this).after(newClone); } }); // Initalise the program by making first draggable: makeDraggable($(".draggable img")); 

但问题是我想在目标区域一次只显示一个图像。 但目前显示所有丢弃的图像。

更具体地说，当用户在目标区域中放下图像并随后拖动另一个图像时，应该从放下的或目标区域中移除先前的图像，并且在目标区域中仅应该看到新图像。 看到这个演示： jsFiddle示例

我该如何解决这个问题？

Answer 1

我不会像其他答案那样简单地清空droppable目标区域，而是在已删除的项目中添加一个类，然后在新的draggable的dragstart事件中删除它们。 此外，在选择新的draggable时添加一个小的fadeOut()事件会很不错。 但是，正如Ishettyl指出的那样，如果用户决定不丢弃可拖动的元素，则还必须再次对该元素进行fadeIn() 。 这可以使用自定义revertfunction完成（见下文）。

结果是这样的：

在我看来，这看起来更优雅，并且不会混淆用户是否允许更多项目。

码

 $(function() { $(".draggable img").draggable({ revert: function (socketObj) { if (!socketObj) { if ($(this).hasClass("droppedItems")) { $(this).fadeOut(function() { $(this).remove(); }); } else { $(".droppedItems").fadeIn(); return true; } } }, helper: "clone", start: function(event, ui) { $(".droppedItems").fadeOut(); } }); $( "#droppable" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", drop: function(event, ui) { $(".droppedItems").remove(); var newClone = $(ui.helper).clone(); newClone.addClass("droppedItems"); $(this).append(newClone); } }); }); 

DEMO

Answer 2

在drop方法中，而不是像这样使用.after使用.append（）

 drop: function(event, ui) { var newClone = $(ui.helper).clone(); makeDraggable(newClone); $(this).children(':not(span)').remove(); // <--- this will remove all the elements which are not a span before appending $(this).append(newClone); } 

另外，不要在div里面写drop drop＃droppable使用这样的span

 
 drop  

这是一个演示http://jsfiddle.net/dhirajbodicherla/e3pf6ays/14/

Answer 3

您使用以下代码一个接一个地添加克隆。

 $(this).after(newClone); 

您需要做的就是：清空droppable容器，然后添加新的克隆，如下所示：

 drop: function(event, ui) { var newClone = $(ui.helper).clone(); makeDraggable(newClone); $(this).empty().append(newClone); } 

更新小提琴