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

Question

我从那里得到了一个很好的解决方案，可以在删除后成功克隆图像。

这是代码：

$(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 example

我该如何解决这个问题？

Answer 1

在 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#droppable 中写 drop，而是使用这样的跨度

<div id="droppable">
  <span>drop</span>
</div>

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

Answer 2

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

$(this).after(newClone);

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

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

Updated fiddle

Answer 3

我不会像其他答案那样简单地清空 droppable 目标区域，而是将 class 添加到掉落的物品中，然后在 dragstart 事件发生时将其移除新 draggable。此外，在选择新的可拖动对象时添加一点 fadeOut() 事件也很好。但是，正如 Ishettyl 指出的那样，如果用户决定不删除可拖动对象，则还必须再次 fadeIn() 元素。这可以使用自定义 revert 函数来完成（见下文）。

结果是这样的：

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

代码

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

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

Remove cloned image after adding another image with jQuery UI

jquery

jquery-ui

jquery-droppable

jquery-draggable

代码

DEMO