我有 2 个列表,其中一个最初是空的。我希望将固定元素放在末尾,以便将元素拖到空列表中,它最终位于 anchor 元素(如书挡)之间。但是当我拖动项目时,它们总是在锁定元素之后结束(我正在使用项目和'not:'选择器来排除 anchor )。而不是在他们之间:
<ul id="list1" class="connected">
<li class="Anchor">Top Of List 1</li>
<li>Item 1</li>
<li>Item 2</li>
<li class="Anchor">Bottom Of List 1</li>
</ul>
<ul id="list1" class="connected">
<li class="Anchor">Top Of List 2</li>
<li class="Anchor">Bottom Of List 2</li>
</ul>
$( "#list1" )
.sortable({ items: "li:not(.Anchor)",
connectWith: ".connected"})...
我有一个 fiddle 可以证明这一点: http://jsfiddle.net/97xdq0hj/
即使在 JQuery UI 网站上,这似乎也被打破了:一旦您将项目拖到固定元素的顶部/底部,就无法将它们放回它们之间。
https://jqueryui.com/sortable/#items
我也尝试过取消 anchor ,但仍然允许将东西放置在 anchor 之外。
我使用的jquery sortable版本是v1.11.2。
关于解决此问题的最佳方法有什么想法吗?
最佳答案
根据阅读其他问题,似乎没有办法使用 sortable 的内置功能来做到这一点。我发现了这个问题的几个例子,其中锁定项目位于特定索引处。
所以这是书挡格式的解决方案,您只需为 anchor 元素添加一个标识符:
var makeSortable=function(selector) {
$(selector)
.sortable({
items: "li:not(.Anchor)",
connectWith: ".connected",
change: function() {
var list = $(this).closest('ul');
var topAnchor = $(list).find('.topAnchor');
var bottomAnchor = $(list).find('.bottomAnchor');
$(list).prepend($(topAnchor).detach());
$(list).append($(bottomAnchor).detach());
}
});
};
makeSortable( "#list1" );
makeSortable( "#list2" );
这是修改后的 fiddle : http://jsfiddle.net/97xdq0hj/1/
功劳归功于此,这个问题让我想到了这个主意。 jQuery UI Sortable dynamic fixed items
关于javascript - jquery UI 可排序,末尾有固定元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31591348/