JQuery UI вложенной сортировки падение область

Question

Я пытаюсь соединить два списка с помощью nestedSortable плагина по msjarfatti (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', 
}); 

Я могу перетащить из СОДЕРЖАНИЯ а rea на верхний уровень 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(); 

Примечание: это может быть хорошая вещь, чтобы использовать placeholder связанные настройки, чтобы лучше понять, что происходит.

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

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