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

Question

我从 my previous 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

我不会像其他答案那样简单地清空droppable目标区域，而是向已放置的项目添加一个类，然后在发生dragstart事件时将其删除。新的可拖动。另外，当选择一个新的可拖动对象时，最好添加一个 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);
        }
    });
});

DEMO