JQuery UI Sortable 对于没有间隙的列表非常有用,但假设我想渲染有间隙的项目列表,例如
1、2、空、4、5、6、空、8
其中数字表示插槽编号。预期的行为是,如果用户将一个元素拖动到 2 插槽上,则 2 值将被推送到空插槽 3 中,并且用户可以将新元素放入 2 插槽中,而如果将新元素拖动到空 3 槽位时,列表项不会下推,用户只需将新项目放入空 3 槽位即可。希望这是有道理的。
我一直在查看 JQuery UI Sortable 代码,似乎我需要利用更改和接收回调来实现此目的,但是,作为 JQuery/JS 的新手,我不清楚该使用什么添加这些空槽占位符并管理选择列表,这样我就不会用自定义代码破坏排序功能。
任何指示、示例等将不胜感激。
经过一段时间的思考后,我创建了一个 jsFiddle:http://jsfiddle.net/pdHnX/ http://jsfiddle.net/pdHnX/
帮忙解释一下问题。我相信我想要完成的一切都可以在重写的 _rearrange 方法中发生。小提琴代码处理项目替换填充项目的情况,但有一个奇怪的问题,如果将项目从项目列表拖动到填充列表,放下该项目,然后将同一项目拖动到填充列表中,填充列表缩小了1,这是一个问题。
一旦您开始将更多项目拖到填充列表中,就会出现更多问题,但这就是我目前遇到的问题。
我不确定我是否正确理解了你的意思,但这就是我的想法:
http://jsfiddle.net/py3DE/ 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
}
});
假设:
- 如果您从顶部列表拖动项目 - 它将被“克隆”(原始项目将保留在列表中)
- 如果您从底部列表中拖动项目 - 它将移动(留下空占位符)
- 如果您将任何项目放在底部列表的占位符上 - 它将替换占位符
- 如果您将任何项目放在底部列表的非空占位符/项目上 - 它将替换它
- 两个列表的大小始终保持相同
让我知道这是否有帮助或者您正在寻找其他东西。
另外解释整个任务(拖动的目的是什么)可能会有所帮助:-)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)