jquery-ui có thể sắp xếp: các yếu tố được kéo ra sau khi sử dụng nhiều loại có thể sắp xếp

Question

Tôi có một loạt các phần tử sắp xếp lồng nhau thể hiện một số hành vi lạ với chỉ mục z.

Về cơ bản, trong một số trường hợp, các phần tử được kéo băm các thùng chứa chính. Nó chỉ xuất hiện sau khi phần tử cha đã được sắp xếp.

Dường như vấn đề đằng sau chỉ dựa trên các yếu tố tiếp tục trong danh sách. Vì vậy, tôi có thể kéo đến một "cao hơn" sắp xếp, nhưng kéo đến một "thấp hơn" sắp xếp và các yếu tố kéo đột nhiên phía sau.

chi tiết:

Với danh sách sắp xếp được Một mỗi phần tử trong A lần lượt chứa một kết nối danh sách sắp xếp được B (như trong danh sách B trong mỗi A được tất cả các kết nối)

Sau khi sắp xếp một phần tử trong A, các phần tử được kéo từ cuộc sống có thể sắp xếp trong danh sách này hiện nằm sau các phần tử A khác.

Tôi đã chơi xung quanh với các tùy chọn z-index khác nhau thông qua cả CSS và Jquery không có kết quả.

Answer 1

Tôi đã tìm thấy giải pháp cho sự cố này.

Khi xác định sortables của bạn, sử dụng:

appendTo: "body" 
helper: "clone" 

này phá vỡ các yếu tố kéo hoàn toàn ra khỏi lồng sắp xếp được z-trật tự và giải quyết vấn đề.

Answer 2

Tôi biết đây là một chuỗi cũ nhưng tôi đã có một giải pháp hơi khác. Sau khi đặt nó vào phần thân, phần tử của tôi đã mất tất cả các thuộc tính CSS của nó. Cách giải quyết của tôi là tạo đối tượng trợ giúp tùy chỉnh của riêng tôi.

Javascript:

appendTo: 'body',   
    helper: function(event, $item){ 
     var $helper = $('<ul class = "styled" id="' + event.originalEvent.target.id + '"><li>' + event.originalEvent.target.innerText + '</li></ul>'); 
     return $helper; 
    }, 

CSS

.styled li{ 
     margin-left: 0px; 
} 
.styled{ 
     cursor:move; 
     text-align:left; 
     margin-left: 0px; 
     padding: 5px; 
     font-size: 1.2em; 
     width: 390px; 
     border: 1px solid lightGrey; 
     background: #E6E6E6 url(https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat- 
     font-weight: normal; 
     color: #555; 
     list-style-type: none; 
} 

Answer 3

phản ứng Khá muộn, nhưng đối với bất cứ ai sau trong tương lai tôi đã tìm thấy rằng nếu bạn đang di chuyển nhiều yếu tố, bạn có thể ghi đè lên loại và dừng các chức năng để đặt chỉ mục z của các phần tử. Ví dụ:

sort: function(event, ui) { 
    $(this).css('z-index', 1000); 
}, 
stop: function(event, ui) { 
    $(this).css('z-index', 0); 
} 

Điều này sẽ cập nhật thuộc tính z-index của phần tử hiện tại đảm bảo rằng nó luôn ở trên cùng. Do đó, bạn có thể mở rộng ý tưởng này thành các phần tử được nhóm. Hãy tưởng tượng:

sort: function(event, ui) { 
    $('.element-group').each(function(index) { 
     $(this).css('z-index', 1000); 
    }); 
}, 
stop: function(event, ui) { 
    $('.element-group').each(function(index) { 
     $(this).css('z-index', 0); 
    }); 
}