Question

我正在尝试通过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的顶层但是尝试拖动到嵌套位置并不是真的有效。如果你几乎一直向右拖动到页面，它有时会起作用。

Answer 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();

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

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

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

jQuery UI嵌套可排序删除区域

1 个答案: