JQuery Sortable ConnectWith don't work

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

Answer 2

I just would like to share something that I just realized and maybe can help somebody.

The element which will receive an element (div/ul) from another list/table must have enough "space" to receive (width and height) and display the new element.

Answer 3

Well, for me the list just works as expected.. Check this: http://jsfiddle.net/GSA2A/2/

Also you should write valid html, close your tags at least.. Most browsers can handle missing closed li-elements depending on which doctype you are using.

You can also use:

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

Looks better to me and more logical to have the sortable function used on id's and the connectWith on a class combining those lists.

Answer 4

I'm assigning both ul to an id and in jQuery file I get both id with and use sortable(); apply different parameters and it's working for me you can use this code I'm using jquery-3.1.1.js, you try to add containment:'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);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>