jquery - 使用 jquery-ui droppable 时，如何在已放置项目后将其从可放置区域中删除？

Question

我有一个 html 页面，其中包含一些可拖动的图像和一组可放置的 div。使用下面的代码一切正常，但我不知道如何在删除项目后从可删除区域中删除该项目。 (假设用户改变了主意......)

我想要一些行为，如果您将一个项目拖出可放置区域，它就会从可放置区域中删除。我预计这是开箱即用的行为，但显然不是。

$(".draggable").draggable({ cursor: "move", revert: "invalid", helper: "clone" });

$(".droppable").droppable({
    hoverClass: "ui-state-active",
            drop: function (ev, ui) {
                $(this).append($(ui.draggable).clone());
            }
});

是否有无论如何支持这种行为，以便我可以从可放置的项目中删除项目(我是否也需要将其设为可拖动？对于我认为这样一个简单而基本的功能来说，这似乎很奇怪且矫枉过正......

Answer 1

我会使用 droppable 的 out event至 remove可拖动对象如下所示:

<强> Working Example

$(".draggable").draggable({
    cursor: "move",
    revert: "invalid",
    helper: "clone"
});

$(".droppable").droppable({
    accept: '.draggable',
    hoverClass: "ui-state-active",
    drop: function (ev, ui) {
        if ($(ui.draggable).hasClass('new')) {
            $('.new').draggable({
                revert: true
            });
        } else {
            $(this).append($(ui.draggable).clone().draggable({
                helper: "original"
            }).addClass('new'));
        }
    },
    out: function (event, ui) {
        $(ui.draggable).fadeOut(1000, function () {
            $(this).remove();
        });
    }
});