Kết nối có thể sắp xếp JQueryWith không hoạt động

Question

Tôi có hai danh sách có thể sắp xếp. Tôi muốn kết nối danh sách này để tôi có thể di chuyển các mục từ danh sách này sang danh sách khác theo cả hai hướng. Tôi sử dụng connectWith sortable, nhưng tôi vẫn không thể di chuyển các mục danh sách từ một đến danh sách khác.

Ngoài ra tôi có thể di chuyển các mục từ địa điểm này sang địa điểm khác nhưng trong cùng một danh sách.

Đây là mã:

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

Và JQuery:

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

tôi không thể tìm ra vấn đề là gì.

Ai đó có thể giúp tôi không?

Cảm ơn

Answer 1

Tôi đã tìm ra.

Sự cố là thuộc tính nổi danh sách. Kết nối có thể sắp xếpVới không hoạt động với css float.

Sortable connectWith Bug

Answer 2

Vâng, đối với tôi danh sách chỉ hoạt động như mong đợi .. Kiểm tra này: http://jsfiddle.net/GSA2A/2/

Ngoài ra, bạn nên viết html hợp lệ, đóng thẻ của bạn ít nhất .. Hầu hết các trình duyệt có thể xử lý mất tích đóng các phần tử li phụ thuộc vào loại tài liệu bạn đang sử dụng.

Bạn cũng có thể sử dụng:

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

Trông tốt hơn cho tôi và hợp lý hơn để có chức năng sắp xếp được sử dụng trên id và connectWith trên lớp kết hợp những danh sách.

Answer 3

Tôi gán cả ul đến một id

<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> 
 
\t 
 
<div id="fdk"> 
 
</div>

và trong file jQuery tôi nhận được cả id với và sử dụng sắp xếp được(); áp dụng thông số khác nhau và nó làm việc cho tôi, bạn có thể sử dụng mã này tôi đang sử dụng jquery-3.1.1.js, bạn cố gắng thêm ngăn: 'tài liệu'

$('#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); 
 
    } 
 
});

Answer 4

Tôi chỉ muốn chia sẻ điều gì đó mà tôi vừa mới nhận ra và có thể giúp đỡ ai đó.

Các yếu tố đó sẽ nhận được một yếu tố (div/ul) từ một danh sách/bảng phải có đủ "không gian" để nhận (chiều rộng và chiều cao) và hiển thị các yếu tố mới.