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

反正有没有支持这种行为,所以我可以从droppable中删除项目(我是否需要使它成为一个可拖动的东西？对于我认为这样一个简单而基本的功能,这看起来很奇怪和过度.

Answer 1

我会用可弃的出事件来删除该拖拽元素,像这样:

工作实例

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