2010-07-22 84 views
25

这个问题已经结束了,但似乎没有人遇到过和我一样的问题。可排序+嵌套列表与jQuery UI 1.8.2

当我做这样的事情

$(function(){ 
    $('#unique-ul').sortable({items:'li'}); 
}); 

我希望它“只是工作”。总的来说,它确实如此。我可以从任何列表拖动任何<li>到任何其他列表,并且该<li>的任何子列表都会随之拖动。

但是,拖动时,它似乎很困惑它应该放在哪里。这里是一个使用1.8.0的例子;它显示相同的行为。

http://jsbin.com/ewuxi3/

所有我发现这个使我相信,这种行为是jQuery用户界面支持的其他反应;例如,这里是一个针对嵌套的可拖动对象1.7注册的bug:http://dev.jqueryui.com/ticket/4333

我找不到任何其他有此问题的人,因此表明我做错了。任何线索?

回答

75

发生这种情况是因为Sortable并不真正知道您是否在嵌套<li>之上或包含它的那个嵌套。一种解决方案是使用这样的结构:

<ul> 
    <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这使得嵌​​套排序更容易,允许在飞行中创建新的嵌套列表。

+4

你的插件看起来非常出色 - 我在演示中玩过一段时间,当我有空时,我会自己实现它。 – Altreus 2010-09-16 08:57:02

+1

(你会考虑标记答案为接受?:)) – mjsarfatti 2010-10-02 22:28:55

+1

这看起来是BOSS。我花了整个下午试图找到像这样简单的事情!谢谢! – 2010-11-04 17:56:38