使用“克隆”助手执行可拖动事件后,如何删除原始元素?

Posted

技术标签:

【中文标题】使用“克隆”助手执行可拖动事件后,如何删除原始元素?【英文标题】:How can I remove the original element after doing a draggable event with a 'clone' helper? 【发布时间】:2010-10-30 15:40:26 【问题描述】:

我有一个可拖动的项目列表。我将这些拖到几个可排序的列表中。我必须在拖动时使用“克隆”辅助方法,因为其他辅助方法无法正常工作。

不幸的是,我不希望该项目一旦被删除到可排序列表中,就保留在原始列表中。

成功拖动后如何删除原始项目? (即一旦它包含在可排序列表之一中)

我认为我可以通过可排序列表上的 droppable 事件访问原始元素,但我不知道如何实现这一点。

谢谢

格雷姆

【问题讨论】:

【参考方案1】:
$('li','#draggable').draggable(
    helper: "clone"
);

$('ul#droppable').droppable(
    accept: "#draggable > li",
    drop: function(event,ui)
        $('li.note').remove();
        ui.draggable.appendTo('ul#droppable').fadeIn();
    
);

【讨论】:

【参考方案2】:

check this example (jQuery UI-demo for sortables)

【讨论】:

【参考方案3】:

此基本设置似乎可以满足您的需求。

$(function() 
    $(".drag").draggable( helper: 'clone' );
    $("#dropArea").droppable(
        drop: function(event, ui) 
            //ui.draggable.appendTo(this);
            $(this).append(ui.draggable);
        
    );
);

如果这不适合你,你能告诉我们一些代码吗?

【讨论】:

以上是关于使用“克隆”助手执行可拖动事件后,如何删除原始元素?的主要内容,如果未能解决你的问题,请参考以下文章

在“停止”事件期间如何定位克隆的可拖动元素?

删除拖放时可拖动的助手克隆

如何克隆反应元素以进行拖动

受原始元素上的 css 更改影响的 Jquery 可拖动助手

使用克隆时可拖动/可放置从原始元素获取数据/属性

如何将可拖动的元素放入可排序的元素中,放置的项目不是原始元素而是自定义助手