Question

I have two sortable lists. I want to connect this lists so I will be able to move items from one list to another in both directions. I use sortable connectWith, but still I cant move list items from one to another list.

Also I’m able to move items from one place to another but in the same list.

Here is the code:

<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>

And JQuery:

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

I cant find out what is the problem.

Can someone help me?

Thanks

Answer 1

I figured out.

The problem was the list float property. Sortable connectWith dont work with css float.

Sortable connectWith Bug