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

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

Answer 2

我不相信这是jQuery UI标准的功能，但以下是几个例子。（假设您希望在拖动时克隆原始图像）

HTML

<div id="test">
     <div class="draggable">Image</div>
     <div class="draggable">Image2</div>
     <div class="draggable">Image3</div>
     <br>
     <br>
     <div class="droppable"></div>
     <div class="droppable"></div>
     <div class="droppable"></div>
</div>

jQuery

var original = true;
var droppable = false;

$( ".draggable" ).draggable({
    helper : "clone",
    stop: function( event, ui ) {
        original = false;
    },
    start: function( event, ui ) {
        original = true;   
    }
});

$( ".droppable" ).droppable({
    drop: function( event, ui ) {
        droppable = true;
        if(original){
            ui.helper.removeClass('ui-draggable-dragging');
            var newDiv = $(ui.helper).clone();
            newDiv.draggable({
                stop: function( event, ui ) {
                    if(!droppable)
                        ui.helper.remove();
                },
                start: function( event, ui ) {
                    droppable = false;    
                }
            });
            $(this).append(newDiv);
        }
        else
            $(this).append(ui.helper);
    }  
});

FIDDLE

http://jsfiddle.net/Bkk5F/3/

替代方案 - Snappy版本

http://jsfiddle.net/Bkk5F/2/

Answer 3

这真的取决于你想做什么。目前，当你放弃拖动时，你正在创建一个没有任何功能的克隆 - 这就是为什么它不会在之后移动。

我认为你要做的是什么，我在这里完成了：http://jsfiddle.net/RDg9B/1/ - 用户将可拖动的东西拖到容器中;如果他改变主意，就把它拖到容器外面。

但是，一般来说，在设计用户界面时，我一直在使用垃圾箱，用户可以移动不需要的物品 - 它们可以消失，也可以返回原来的位置（向document.body添加可放置的功能是棘手的）

作为附加组件，这里是克隆的小提琴（这是相当合乎逻辑的，预期的行为：D）！ http://jsfiddle.net/RDg9B/2/

Answer 4

您可以尝试在droppable容器上实现sortable（）。我尝试过这样的事情：http://jsbin.com/axegem/105/

希望这有帮助

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

4 个答案: