jQuery UI 嵌套可排序放置区答案

【问题标题】：jQuery UI nested sortable drop areajQuery UI 嵌套可排序放置区
【发布时间】：2013-02-15 17:12:56
【问题描述】：

我正在尝试使用 msjarfatti (https://github.com/mjsarfatti/nestedSortable) 的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',
});

我可以从 CONTENT 区域拖动到 SELECTIONS 的顶层，但尝试拖动到嵌套位置并没有真正起作用。如果您一直向右拖动几乎离开页面，它有时会起作用。

【问题讨论】：

标签： jquery jquery-ui jquery-plugins nested-sortable

【解决方案1】：

将您的 HTML 放入具有固定宽度的 DIV 中，然后就可以使用了。

您也可以在两个 UL 上添加一个通用类，以简化您的 JS 代码。假设您在两个 UL 上添加类 «.connected-lists»，您的所有 JS 都可以替换为以下内容：

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

注意：最好使用 placeholder 相关设置更好地了解正在发生的事情。

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

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

【讨论】：