使用 jquery-ui droppable 时，如何从 droppable 区域中删除已经删除的项目？

Posted 2023-05-08

技术标签:

【中文标题】使用 jquery-ui droppable 时，如何从 droppable 区域中删除已经删除的项目？【英文标题】：When using jquery-ui droppable, how can you remove an item from the droppable area after you have already dropped it? 【发布时间】：2013-11-30 06:26:10 【问题描述】：

我有一个 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());
            
);

是否有支持该行为的方法，以便我可以从可放置项中删除项目（我是否也需要将其设置为可拖动项？对于我认为如此简单和基本的功能来说，这似乎有点奇怪和矫枉过正......

【问题讨论】：

您在寻找什么我的答案缺少它是一个公认的答案吗？如果缺少某些内容，我将很乐意进行更改或进行更多研究。请在宽限期结束前告诉我。谢谢我喜欢 apaul34208 的解决方案，但是如果您想将可拖放对象从一个可拖放对象移动到另一个对象，它目前不可行。 【参考方案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();
        );
    
);

【讨论】：

很好的例子，只是一个小评论。您需要在淡出之前检查该元素是否先前已添加，如果没有，您可以删除原始元素。添加 if ($(ui.draggable).hasClass('new')) 解决了这个问题【参考方案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);
      
);

小提琴

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

替代 - Snappy 版本

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

【讨论】：

【参考方案3】：

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

我认为您正在尝试做的事情，我在这里完成了：http://jsfiddle.net/RDg9B/1/ - 用户将可拖动对象拖到容器中；如果他改变主意，他会把它拖到容器外。

然而，一般来说，在设计 UI 时，我一直在使用垃圾容器，用户可以将不需要的项目移动到该容器中 - 它们可以消失，也可以返回到原来的位置（向 document.body 添加可放置功能很棘手）

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

【讨论】：

【参考方案4】：