这个问题已经结束了,但似乎没有人遇到过和我一样的问题。
当我做这样的事情时
$(function(){
$('#unique-ul').sortable({items:'li'});
});
我希望它“正常工作”。总的来说,确实如此。我可以将任何
但是,当拖动时,它似乎对应该放在哪里感到非常困惑。这是使用 1.8.0 的示例;它显示相同的行为。
我发现的有关此问题的所有其他回复使我相信 jQuery UI 支持此行为;例如,这是针对 1.7 注册的有关嵌套可拖动对象的错误: http://dev.jqueryui.com/ticket/4333
我找不到其他人遇到过这个问题,所以这表明我做错了。有什么线索吗?
最佳答案
发生这种情况是因为 Sortable 并不真正知道您是否位于嵌套的 <li>
之上或包含它的那个。一种解决方案是使用如下结构:
$(document).ready(function() {
$('#sortable-category').sortable({
items: 'li',
toleranceElement: '> div'
});
});
* {
box-sizing: border-box;
list-style: none;
}
ul > li > div {
margin-bottom: 5px;
border-bottom: 1px solid #ddd;
}
ul,
ul > li > div {
display: block;
width: 100%;
float: left;
}
ul > li {
display: block;
width: 100%;
margin-bottom: 5px;
float: left;
border: 1px solid #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="sortable-category">
<li>
<div>Item 1</div>
<ul>
<li>
<div>Subitem 1</div>
</li>
<li>
<div>Subitem 2</div>
</li>
</ul>
</li>
<li>
<div>Item 2</div>
</li>
<li>
<div>Item 3</div>
</li>
</ul>
并设置选项 toleranceElement: '> div'
。我不知道为什么没有记录它,但它就在那里,它告诉 Sortable 仅考虑 <div>
计算交叉点时。
如果你有兴趣,我最近developed a plugin这使得嵌套排序更容易,允许动态创建新的嵌套列表。
关于jquery - 使用 jQuery UI 1.8.2 进行可排序 + 嵌套列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3308672/