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