jQuery UI的嵌套排序拖放区域

Question

我试图使用msjarfatti的nestedSortable插件（https://github.com/mjsarfatti/nestedSortable）

连接两个名单我已经在这里设置一个测试http://jsfiddle.net/gcWQQ/46/

HTML：

<h4>SELECTIONS</h4> 
<ul id="selections"> 
    <li><div>Section 1.0</div></li> 
</ul> 
<br> 
<h4>CONTENT SET</h4> 
<ul id="content"> 
<li> 
    <div><h4>Headline Here</h4><p>Metadata here</p><p>Article snippet goes here and it can get to be very long. Lorem ipsum dolor sit amet. Blah blah more text here.</p></div> 
</li> 
<li> 
    <div><h4>Headline Here</h4><p>Metadata here</p><p>Article snippet goes here and it can get to be very long. Lorem ipsum dolor sit amet. Blah blah more text here.</p></div> 
</li> 
<li> 
    <div><h4>Headline Here</h4><p>Metadata here</p><p>Article snippet goes here and it can get to be very long. Lorem ipsum dolor sit amet. Blah blah more text here.</p></div> 
</li> 
<li> 
    <div><h4>Headline Here</h4><p>Metadata here</p><p>Article snippet goes here and it can get to be very long. Lorem ipsum dolor sit amet. Blah blah more text here.</p></div> 
</li> 
</ul> 

JS：

$("ul, li").disableSelection(); 

$('#selections').nestedSortable({ 
listType: 'ul', 
toleranceElement: 'div', 
items: 'li', 
tolerance:"pointer", 
}); 

$('#content').nestedSortable({ 
listType : "ul", 
handle:"div", 
toleranceElement:"div", 
helper:'clone', 
items: 'li', 
connectWith:'#selections', 
}); 

我能够从内容的拖动回到SELECTIONS的最高级别，但试图拖入嵌套位置并不真正起作用。如果一直拖到右边几乎离开页面，它有时会起作用。

Answer 1

把你的HTML放在一个DIV的固定宽度&你会在路上。

另外，您可以在两个UL上添加一个通用类，以简化您的JS代码。假设你添加类«.connected-名单»在两个UL，所有的JS可以用的东西来替换：

$('#selections, #content').nestedSortable({ 
    listType: 'ul', 
    items: 'li', 
    handle:'div', 
    toleranceElement: '> div', 
    tolerance:'intersec', 
    helper:'clone', 
    connectWith:'.connected-lists' 
}).disableSelection(); 

注：它可能是一个很好用的东西占位符的相关设置可以更好地了解发生了什么。

http://api.jqueryui.com/sortable/#option-placeholder

http://api.jqueryui.com/sortable/#option-forcePlaceholderSize