jQuery UI可排序-在列表中添加占位符以模拟空白 [英] JQuery UI Sortable - Add Placeholders to Lists to Simulate empty spaces
问题描述
JQuery UI Sortable非常适合没有间隙的列表，但是说我想呈现带有间隙的项目列表，例如
JQuery UI Sortable works great for lists with no gaps, but say I want to render a list of items with gaps, e.g.
1、2，空，4、5、6，空，8
1, 2, empty, 4, 5, 6, empty, 8
其中数字表示插槽号.如果用户将元素拖动到2插槽上，将2值推入空插槽3，并且用户可以将新元素拖放到2插槽中，则如果用户将新元素拖动到插槽2上，则预期的行为是空3槽，列表项不会下推，用户可以将新项目放到空3槽中.希望这是有道理的.
where the number represents the slot number. The behavior expected then would be if the user drags an element over the 2 slot, the 2 value gets pushed to the empty slot 3, and the user could drop the new element in the 2 slot, whereas if they drag a new element over the empty 3 slot, the list items would not push down, and the user could just drop the new item into the empty 3 slot. Hopefully this makes sense.
我一直在查看JQuery UI Sortable代码，看来我需要利用更改并接收回调才能实现此目的，但是，对于JQuery/JS来说，它是新手，所以我不清楚用于添加这些空插槽占位符和管理选择列表的方法，这样我就不会用自定义代码破坏排序功能.
I've been looking at the JQuery UI Sortable code, and it seems that I need to utilize the change and receive callbacks in order to achieve this, but, being new to JQuery/JS in general, it's not clear to me what to use to add these empty slot placeholders and manage the selection list so that I don't break the sorting functionality with custom code.
任何指针，示例等，将不胜感激.
Any pointers, examples, etc. would be much appreciated.
对此打了一段时间之后，我创建了一个jsFiddle: http://jsfiddle.net/pdHnX/
After banging my head on this for a while, I created a jsFiddle: http://jsfiddle.net/pdHnX/
以帮助解释问题.我相信我要完成的所有工作都可以在重写的_rearrange方法中进行.提琴代码处理一种情况，其中某项正在替换填充项，但是存在一个奇怪的问题，如果您将某项从项列表中拖到填充项列表中，则将其拖放到填充项中，然后将同一项拖到填充项中，填充列表缩小1，这是一个问题.
To help explain the problem. I believe everything I'm trying to accomplish can happen in an overridden _rearrange method. The fiddle code handles the case where an item is replacing a filler item, but there is an odd issue, where if you drag an item from the item list to the filler list, drop the item, then drag the same item within the filler list, the filler list is shrunk by 1, which is a problem.
一旦您开始将更多项目拖到填充列表中，就会出现更多问题，但这是我目前遇到的问题.
There are more issues once you start dragging more items into the filler list, but this is where I'm at with the problem at the moment.
推荐答案
对不起，这是一个很难解释的问题.这些要求确实是具体的，很难描述.
Sorry, this was a really difficult question to detail out. The requirements were really specific and hard to describe.
这是我一直在寻找的解决方案.
Here is the solution I was looking for.
这里的其他答案虽然可能是对描述欠佳的问题的解决方案，但并不是我想要的.
The others answers here, while they may have been solutions to the poorly described problem, were not what I was looking for.
不幸的是，sortable.js代码非常冗长，因此链接的代码也非常冗长.我发布的解决方案还对CSS类和DOM ID进行了一些假设，以完成工作.
Unfortunately, the sortable.js code is very hairy so the code linked there is also very hairy. The solution I've posted also makes some assumptions on CSS classes and DOM ids to get the job done.
这篇关于jQuery UI可排序-在列表中添加占位符以模拟空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
