0

我正在尝试使用 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',
});

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

4

1 回答 1

0

将您的 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();

注意：使用占位符相关设置更好地了解正在发生的事情可能是一件好事。

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

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

于 2013-05-10T15:36:22.253 回答