JQuery UI可排序 - 将占位符添加到列表以模拟空白空间

Question

JQuery UI Sortable非常适用于没有间隙的列表,但是我想要渲染一个带有间隙的项目列表,例如

1,2,空,4,5,6,空,8

其中数字代表插槽号.然后预期的行为是,如果用户在2槽上拖动一个元素,则将2值推送到空槽3,并且用户可以将新元素放入2槽中,而如果它们将新元素拖过2槽.空3个插槽,列表项不会按下,用户可以将新项目放入空的3个插槽中.希望这是有道理的.

我一直在看JQuery UI可排序代码,似乎我需要利用更改并接收回调以实现这一点,但是,对于JQuery/JS一般来说,我不清楚使用什么添加这些空插槽占位符并管理选择列表,以便我不会破坏自定义代码的排序功能.

任何指针,示例等都将非常感激.

在敲了一会儿之后,我创造了一个jsFiddle:http://jsfiddle.net/pdHnX/

为了帮助解释这个问题.我相信我想要完成的所有事情都可能发生在被重写的_rearrange方法中.小提琴代码处理项目正在替换填充项目的情况,但是存在一个奇怪的问题,如果您将项目列表中的项目拖动到填充列表,则删除该项目,然后在填充列表中拖动相同的项目,填充列表缩小1,这是一个问题.

一旦开始将更多项目拖动到填充列表中,就会出现更多问题,但这是我目前遇到问题的地方.

Answer 1

我不确定我是否理解正确,但这就是我想出的:

http://jsfiddle.net/py3DE/

$(".source .item").draggable({ revert: "invalid", appendTo: 'body', helper: 'clone',
    start: function(ev, ui){ ui.helper.width($(this).width()); }                    // ensure helper width
});

$(".target .empty").droppable({ tolerance: 'pointer', hoverClass: 'highlight',
    drop: function(ev, ui){
        var item = ui.draggable;
        if (!ui.draggable.closest('.empty').length) item = item.clone().draggable();// if item was dragged from the source list - clone it
        this.innerHTML = '';                                                        // clean the placeholder
        item.css({ top: 0, left: 0 }).appendTo(this);                                // append item to placeholder
    }
});

假设:

• 如果您从顶部列表中拖动项目 - 它将被"克隆"(原始文件将保留在列表中)
• 如果你从底部列表中拖动项目 - 它将移动(留空占位符)
• 如果您删除底部列表的占位符上的任何项目 - 它将替换占位符
• 如果您删除底部列表的非空占位符/项目上的任何项目 - 它将替换它
• 两个列表的大小始终保持不变

如果这有帮助或者您正在寻找其他东西,请告诉我.还解释了整个任务(拖动的目的是什么)可能会有所帮助:-)

Answer 2

抱歉，这是一个很难详细说明的问题。这些要求非常具体且难以描述。

这是我一直在寻找的解决方案。

这里的其他答案虽然可能是对描述不明确的问题的解决方案，但并不是我想要的。

http://jsfiddle.net/vfezJ/

不幸的是，sortable.js 代码非常复杂，因此链接到那里的代码也非常复杂。我发布的解决方案还对 CSS 类和 DOM id 做出了一些假设来完成工作。