0

msjarfatti ( https://github.com/mjsarfatti/nestedSortable )による nestedSortable プラグインを使用して、2 つのリストを接続しようとしています。

ここでテストをセットアップしました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内に配置すると、すぐに使用できます。

また、JS コードを簡素化するために、2 つのULに共通のクラスを追加することもできます。クラス « .connected-lists » を 2 つの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

于 2013-05-10T15:36:22.253 に答える