jQuery UI Draggable-无辅助克隆的connectToSortable-或如何将项目从一个列表移动到另一个列表 [英] jQuery UI Draggable - connectToSortable without helper clone - or how to move items from one list to another

问题描述

看看此示例.

文档表示:

helper必须设置为'clone'才能正常工作

helper must be set to 'clone' in order to work flawlessly

实际上，如果我删除了helper: 'clone'，则拖动时会发生奇怪的事情.

Indeed, if I remove helper: 'clone', strange things happen when dragging.

问题是我对克隆"行为不感兴趣.我希望将这些物品从一个列表中移动到另一个列表中.

The problem is that I'm not interested in the "clone" behavior. I would like the items to move from one list to another.

注意:原始(左侧)列表不能排序.

Note: The original (left) list shouldn't be sortable.

有什么想法吗?

推荐答案

我一直在努力解决同样的问题.如果确实将助手设置为原始"，则会出现各种各样的异常行为.

I've been struggling with this same problem. If I do indeed set the helper to 'original' I get all kinds of jumpy and weird behavior.

不确定它是否能满足您的目的，但是我编写了一些代码来侦听拖动开始/停止事件以及可排序的更新事件.

Not sure if it will serve your purposes, but I wrote some code to listen to the drag start/stop events and also the sortable update event.

在拖动开始时，该项目从列表中隐藏.如果该项目未转移到另一个列表(由布尔值确定)，则该项目未隐藏.但是，如果物品被转移，则原件将被移除.

On drag start the item is hidden from the list. If the item is not transferred to the other list (determined by a boolean) then the item is unhidden. However, if the item is transferred then the original is removed.

$(function() {
var transferred = false;
$('#draggable li').draggable({
    connectToSortable: '#sortable',
    helper: 'clone',
    start: function(event, ui)
    {
        $(this).hide();
    },
    stop: function(event, ui)
    {
        if(!transferred)
            $(this).show();
        else
        {
            $(this).remove();
            transferred = false;
        }
    }
});

$('#sortable').sortable({
    receive: function(event, ui)
    {
        transferred = true;
    }
});

})；

修改了jsfiddle示例. (http://jsfiddle.net/xD2dW/12/)

显然可以修改代码以满足您的特定需求，但是我希望这至少是一个好的开始.

Obviously the code can be modified to meet your specific needs, but I hope this is at least a good start.

这篇关于jQuery UI Draggable-无辅助克隆的connectToSortable-或如何将项目从一个列表移动到另一个列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！