使用jquery-ui droppable时，如何在丢弃项目后从可放置区域中删除项目？ [英] When using jquery-ui droppable, how can you remove an item from the droppable area after you have already dropped it?

问题描述

我有一个html页面，其中包含一些可拖动的图像和一组可放置的div。使用下面的代码一切正常，但我无法弄清楚如何在丢弃后从可放置区域移除一个项目。 （假设用户改变主意。）

I have a html page with some images that are dragggable and a set of divs that are droppable. It all works fine using the below code but I can't figure out how i can REMOVE AN ITEM from the droppable area after its been dropped. (lets say the user changes their mind . .)

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

I want some behavior that if you drag an item out of the droppable area that it gets removed from the droppable area. I expected this to be the behavior out of the box but apparently not.

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

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

无论如何都支持这种行为，所以我可以从droppable中删除项目（我是否需要制作）对于这样一个简单而基本的功能我觉得它看起来很奇怪而且有些过分。

Is there anyway to support the behavior so I can remove items from a droppable (do i need to make it a draggable as well? that would seem odd and overkill for such a simple and basic feature I think . .

推荐答案

我会使用droppable的输出事件到删除这样的可拖动：

I would use droppable's out event to remove the draggables like so:

工作示例

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

这篇关于使用jquery-ui droppable时，如何在丢弃项目后从可放置区域中删除项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！