JQuery UI Sortable 非常适合没有间隙的列表,但是说我想呈现一个有间隙的项目列表,例如
1, 2, 空的, 4, 5, 6, 空的, 8
其中数字代表槽号。那么预期的行为是如果用户将一个元素拖到 2 槽上,2 值被推到空槽 3,用户可以将新元素放在 2 槽中,而如果他们将新元素拖到空 3 槽,列表项不会下推,用户只需将新项目放入空 3 槽。希望这是有道理的。
我一直在查看 JQuery UI 可排序代码,似乎我需要利用更改并接收回调来实现这一点,但是,一般来说,作为 JQuery/JS 的新手,我不清楚使用什么添加这些空插槽占位符并管理选择列表,这样我就不会使用自定义代码破坏排序功能。
任何指针、示例等将不胜感激。
经过一段时间的思考后,我创建了一个 jsFiddle:http://jsfiddle.net/pdHnX/
帮助解释问题。我相信我想要完成的所有事情都可以在重写的 _rearrange 方法中发生。 fiddle 代码处理项目替换填充项目的情况,但有一个奇怪的问题,如果您将项目从项目列表拖动到填充列表,放下项目,然后在填充列表中拖动相同的项目,填充列表缩小了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
}
});
假设:
让我知道这是否有帮助,或者您是否正在寻找其他东西。
还解释整个任务(这个拖动的目的是什么)可能会有所帮助:-)
关于jquery-ui - JQuery UI Sortable - 将占位符添加到列表以模拟空白空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12221179/