Kéo và thả Jquery trong danh sách lồng nhau - cách thu nhỏ/xóa hình nhấp nháy

Question

Dựa trên http://jqueryui.com/demos/sortable/#placeholder Tôi đang làm việc trên giao diện kéo và thả cho phép người dùng sắp xếp lại danh sách lồng nhau. Như bạn có thể thấy từ the link, điều này hoạt động tốt trên các danh sách đơn giản.

Tuy nhiên, khi tôi thử nó với danh sách lồng nhau, tôi nhận được khá mờ nhấp nháy. Hãy thử nó cho chính mình tại địa chỉ:

http://jsfiddle.net/unklefolk/G5xPE/

Sau khi di chuyển một số mặt hàng nội vào danh sách bên ngoài và visa-versa bạn sẽ thấy rằng có khá nhiều bập bùng/dithering xảy ra, đặc biệt là xung quanh các điểm mà một bên ngoài danh sách đáp ứng và danh sách bên trong.

Tôi có thể làm gì để giảm thiểu sự nhấp nháy này? Có bất kỳ thay đổi nào đối với jQuery hoặc CSS mà tôi có thể thực hiện để làm giảm vấn đề này không?

Answer 1

Hãy nhìn vào Plugin sắp xếp được lồng nhau này. Đó là danh sách mục điều khiển, nhưng nó có thể là câu trả lời cho vấn đề của bạn.

nestedSortable jQuery Plugin

Answer 2

Tôi đã có một vấn đề tương tự một lần trước đây, tôi không có thời gian để thích ứng với nó nhưng đây là giải pháp của tôi.

Sử dụng một callback js:

$(document).ready(function() { 
    var s = $("#sortable"); 
    s.sortable({ 
     tolerance: 'pointer', 
     stop: function(event, ui) { 
      var ranks = ['gold','silver','bronze']; 
      $("li",s).each(function (idx) { 
       for(var i = 0; i < ranks.length; ++i) $(this).removeClass(ranks[i]); 
       $(this).addClass(ranks[idx]); 
      }); 
     } 
    }); 
}); 

Bạn có thể nhìn thấy nó here in jsfiddle.net

Answer 3

Thông thường tôi sử dụng helper: 'clone' Mà có một số ảnh hưởng đến vấn đề này (không bao giờ hiểu tại sao) .i không biết nếu nó hoạt động, trên firefox 8 của tôi trông đẹp hơn

$(function() { 
    $(".sortable").sortable({ 
     placeholder: "ui-state-highlight", 
     connectWith: ".sortable", 
     helper: 'clone' 
    }); 
    $(".sortable").disableSelection(); 
}); 

http://jsfiddle.net/nicolapeluchetti/G5xPE/17/

Answer 4

OP tại đây. Chỉ muốn đăng những gì tôi cuối cùng đã làm để sửa lỗi này. Dựa trên http://bugs.jqueryui.com/ticket/4741?cversion=0&cnum_hist=8 tôi không chú thích dòng sau trong jquery-ui-1.8.6.js:

&& itemElement.parentNode == this.placeholder[0].parentNode // only rearrange items within the same container 

tôi vẫn sử dụng thuộc tính connectWith.

Tôi hiện có thể kéo và thả giữa các cấp trong cấu trúc phân cấp mà không bị nhấp nháy. Hy vọng điều này sẽ giúp người dùng SO khác.