使用jQuery UI添加其他图像后，删除克隆的图像 [英] Remove cloned image after adding another image with jQuery UI

问题描述

我有一个很好的解决方案，来自我之前的问题，该问题在删除后成功克隆了图像.

I have a nice solution from my previous question that successfully clones images after being dropped.

这是代码:

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

但是问题是我想一次仅在目标区域中显示一幅图像.，但是当前显示的是所有丢弃的图像.

But the problem is I want to show only one image at a time in the targeted area. But currently all the dropped images are shown.

更具体地说，当用户将图像放置在目标区域中并随后拖动另一幅图像时，应从放置的区域或目标区域中删除先前的图像，并且在目标区域中仅可见新图像.观看此演示: jsFiddle示例

More specifically when user drops an image in the targeted area and later drags another image, the previous image should be removed from the dropped or targeted area and only the new image should be visible in the targeted area. See this demo: jsFiddle example

我该如何解决?

推荐答案

我不会像其他答案那样简单地清空droppable目标区域，而是将一个类添加到放置的项目中，然后在新的draggable事件.同样，在选择新的可拖动对象时添加一个小的fadeOut()事件也很好.但是，正如 Ishettyl 指出的那样，如果用户决定不拖放可拖动对象，则还必须再次fadeIn()元素.可以使用自定义的revert函数(请参见下文)完成此操作.

Instead of simply emptying the droppable target area like the other answers do, I would add a class to the dropped items and then remove them upon a dragstart event of a new draggable. Also, it's nice to add a little fadeOut() event when a new draggable is selected. However, as Ishettyl pointed out, one must also fadeIn() the element again if the user decides not to drop the draggable. This can be done using a custom revert function (see below).

结果就是这样:

在我看来，这看起来更优雅，并且不会使用户困惑是否允许更多物品.

In my opinion this looks more elegant and doesn't confuse the user whether more items are allowed.

$(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添加其他图像后，删除克隆的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！