是否有一个jQuery UI“反可排序”,可以让LI从UL获取,但始终指定顺序?
问题描述:
我有一些部分工作,有两个UL,都有jQuery UI .sortable()
调用它。用户可以并且可能应该将LI从一个放到另一个。我希望第二个列表真正可排序,但第一个列表保留单个排序,而不是在第二个列表中添加一个LI,如果用户单击该列表,则会在末尾添加LI。我看到了一个非常明显的做法:保留LI的值的JavaScript列表,或者交替地设置一个data-index='0'
(然后1,2,3等),然后在任何一种情况下创建一个单一的,可能是自下而上的,可怕的泡沫排序。是否有一个jQuery UI“反可排序”,可以让LI从UL获取,但始终指定顺序?
这似乎是我可以直接得到的东西,但它有一个“如果你这样做,你工作太低级”代码味道给我。除了冒泡排序参考之外,在我认为O(n)真的可以忍受的情况下,似乎某个知道jQuery UI的人可以产生更短更清晰的实现。
我上面列出了解决我的问题的难题。我应该考虑什么简单的方法。
答
稍微犹豫后,我决定采用明显的解决方案,即使它不像通常的jQuery最佳解决方案。我在生成它们的服务器端代码中添加了一个整数data-
字段的升序整数,客户端创建了一个单一的气泡排序迭代函数,如果除最后一个项目以外的所有项目(最后添加的项目都是重新添加的)是为了:
var get_index = function(node)
{
return parseInt(jQuery(node).attr('data-sort-position'));
};
var sort_available = function()
{
var len = jQuery('#available > li').length;
if (len >= 2)
{
var moved = false;
for(var index = 0; index < len; index += 1)
{
if (!moved)
{
if (get_index(jQuery('#available > li')[index]) >
get_index(jQuery('#available > li')[len - 1]))
{
var node = jQuery(
jQuery('#available > li')[len - 1]).detach();
jQuery(node).insertBefore(
jQuery('#available > li')[index]);
moved = true;
}
}
}
}
};
我再补充一个sort_available()
调用处理程序结束时点击了其他目的地名单中的一员时被调用:
jQuery('#included li').click(function(event)
{
jQuery(event.target).detach();
jQuery('#available').append(event.target);
assign_clicks();
sort_available();
});
现在,它似乎是把物品放回原来的位置。
所以你想拖动一些静态数据列表到另一个可以排序的列表? – epascarello
是的,返回(或更简单地移动项目只需点击一下)。第二个UL最初为空,具有用户从第一个UL点击或拖动的项目。这应该从第一个UL中删除该项目。但是,如果用户重新考虑并将项目从第二个UL移回到第一个UL,我希望新移动的元素返回到第一个UL中仍然(或再次)存在的项目中的原始位置第一个UL。 – JonathanHayward
也许你想拖动,不可排序。 – epascarello