JQuery сортируемый ConnectWith не работает

у меня есть два списка сортировки. Я хочу подключить эти списки, чтобы я мог перемещать элементы из одного списка в другой в обоих направлениях. Я использую сортируемый connectWith, но все же я не могу перемещать элементы списка из одного списка в другой.

также я могу перемещать элементы из одного места в другое, но в том же списке.

вот код:

<div class="category-container" data-id="1"> 
    <div class="category-header" data-id="1"> 
    </div>
    <ul class="list-items ui-sortable">
        <li class="item" data-id="3">
        <li class="item" data-id="43">
        <li class="item" data-id="28">
        <li class="item" data-id="24">
        <li class="item" data-id="21">
        <li class="item new" data-id="0">
    </ul>
</div>
<div class="category-container" data-id="2">
    <div class="category-header" data-id="2"> 
    </div>
    <ul class="list-items ui-sortable">
        <li class="item" data-id="17">
        <li class="item" data-id="8">
        <li class="item" data-id="9">
        <li class="item new" data-id="0">
    </ul>
</div>

И JQuery:

 $(".list-items").sortable({
            connectWith: '.list-items',
            items: "li:not(.item.new)",
            placeholder: 'place-holder',
            scroll: false,
            tolerance: "pointer"
}).disableSelection();

Я не могу выяснить в чем проблема.

кто-то может помочь мне?

спасибо

4 ответов


Я разобрался.

проблема заключалась в свойстве list float. Сортируемый connectWith не работает с CSS float.

сортируемый connectWith ошибка


Ну, для меня список работает так, как ожидалось.. Проверить это: http://jsfiddle.net/GSA2A/2/

также вы должны написать действительный html, закройте теги по крайней мере.. Большинство браузеров могут обрабатывать отсутствующие закрытые li-элементы в зависимости от используемого doctype.

вы также можете использовать:

$('#list1, list2').sortable({.......

выглядит лучше для меня и более логично иметь сортируемую функцию, используемую на id и connectWith в классе, объединяющем эти списки.


Я просто хотел бы поделиться тем, что я только что понял, и, возможно, может помочь кому-то.

на элемент, который получит элемент (div / ul) из другого списка/таблицы должно быть достаточно "пространства" для получения (ширина и высота) и отображение нового элемента.

Schema


Я назначаю оба ul идентификатору

<ul id="list">
    <li>School</li>
    <li>Name</li>
    <li>Roll</li>
</ul>
<ul id="thi">
    <li>School</li>
    <li>Name</li>
    <li>Roll</li>
</ul>
	
<div id="fdk">
</div>
и в файле jQuery я получаю id и использую сортировку(); применяйте разные параметры, и это работает для меня вы можете использовать этот код, который я использую jquery-3.1.1.js, вы пытаетесь добавить сдерживание: 'document'

$('#list, #thi').sortable({
   containment:'document',
   tolerance:'pointer',
   cursor:'pointer',
   revert:true,
   opacity:0.4,
   connectWith:'#list,#thi',
   update: function() {
       // alert('f');
       content = $(this).text();
       $('#fdk').text(content);
   }
});