jQuery Draggable + Sortable - Cách kéo và thả giữa hai danh sách có thể cuộn

Question

Tôi muốn có hai danh sách, các mục khả dụng và các mục đã chọn, theo đó các mục có sẵn được gán cho các mục đã chọn qua kéo và thả. Tôi yêu cầu các mục đã chọn có thể sắp xếp được, nhưng không phải các mục có sẵn. Thách thức là cả hai danh sách có thể chứa một số lượng đáng kể các mục và do đó cần phải cuộn được.

Đây là jQuery Tôi có vậy, đến nay:

 <script type="text/javascript"> 
     $(function() { 
      $("#available > li").draggable({ 
       revert: 'invalid', 
       connectToSortable: '#selected', 
       containment: '#drag_container' 
      }); 

      $("#selected").sortable({ 
       axis: 'y', 
       placeholder: 'ui-state-highlight' 
      }); 
     }); 
    </script> 

Và HTML tương ứng:

  <div class="drag_container"> 
      <ul id="available" class="drag_column draggable"> 
       <li id="item1" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 1</li> 
       <li id="item2" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 2</li> 
       <li id="item3" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 3</li> 
       <li id="item4" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 4</li> 
       <li id="item5" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 5</li> 
       <li id="item6" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 6</li> 
       <li id="item9" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 9</li> 
       <li id="item10" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 10</li> 
      </ul> 


      <ul id="selected" class="drag_column draggable sortable" style="margin-left: 20px;"> 
       <li id="item7" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 7</li> 
       <li id="item8" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 8</li> 
       <li id="item9" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 9</li> 
       <li id="item10" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 10</li> 
       <li id="item11" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 11</li> 
       <li id="item12" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 12</li> 
       <li id="item13" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 13</li> 
       <li id="item14" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 14</li> 
       <li id="item15" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 15</li> 
       <li id="item16" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 16</li> 
       <li id="item17" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 17</li> 
       <li id="item18" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 18</li> 
      </ul> 
      <div style="clear: both">&nbsp;</div> 
     </div> 

Với yêu cầu danh sách cuộn, tuy nhiên, tôi không thể nhận được các hành vi có thể kéo để làm việc thanh lịch (xem bản demo tại http://pastehtml.com/view/1bsk6bt.html).

Khi mục đang được kéo vào danh sách Mặt hàng có sẵn, mục đó sẽ biến mất sau khung có thể cuộn được. Tôi đã thử helper bản sao, và cũng đã cố gắng chơi xung quanh với chứa divs, tùy chọn tràn khác nhau, tắt tùy chọn cuộn trong jQuery, nhưng không thể làm cho nó hoạt động đúng. Tôi chắc rằng có ai đó ở đó đã hoàn thành một thứ gì đó giống như những gì tôi đang định làm ở đây và có thể cứu tôi một thời gian? :)

Mọi trợ giúp sẽ được đánh giá cao!

Answer 1

Whew! Đó là một điều thú vị để sửa chữa.

Vấn đề đầu tiên, với danh sách cuộn mãi mãi theo chiều ngang, tôi đã sửa với một số thay đổi tràn đơn giản trong CSS của bạn. Tôi đã xóa cả hai thuộc tính tràn từ .drag_column của bạn và đặt tràn: ẩn trong .drag_container.

.drag_container { 
    width: 1000px; 
    margin: 0 auto; 
    position: relative; 
    border: 1px solid black; 
    position: relative; 
    z-index: 1; 
    overflow: hidden; 
} 

.drag_column { 
    padding: 5px; 
    width: 490px; 
    height: 200px; 
    float: left; 
    position: relative; 
} 

Thật không may, khi tôi tạo ra lỗi vị trí khi bạn di chuyển con kéo từ danh sách này sang danh sách khác (nó sẽ quay lên, tùy thuộc vào mục danh sách bạn chọn). Để khắc phục điều này, tôi đã thêm dòng "helper: clone" vào chức năng tạo kéo được của bạn.

$("#available > li").draggable({ 
    revert: 'invalid', 
    connectToSortable: '#selected', 
    containment: '#drag_container', 
    helper: 'clone' 
}); 

Một lần nữa, điều này tạo ra hiệu ứng không mong muốn. Trình trợ giúp bản sao làm cho nó trở thành danh sách ban đầu không bao giờ có các mục bị xóa. Để khắc phục điều này, tôi đã phải tự tạo một hàm sẽ xóa mục cũ. Những gì tôi đã làm là tôi đã thêm một bắt đầu: chức năng cho đối tượng kéo được của bạn, mà lấy id đối tượng và đặt nó trong một biến. Sau đó, tôi tạo ra một đối tượng droppable của danh sách #selected của bạn, và thực hiện một thả: chức năng đó. Hàm drop đó đơn giản thực hiện một slideUp (100) trên đối tượng với id phù hợp. Lưu ý rằng tôi có một sự tạo biến trong lúc bắt đầu tập lệnh - điều này sửa lỗi trong IE.

var dragged = null; 
$(function() { 
    $("#available > li").draggable({ 
     revert: 'invalid', 
     connectToSortable: '#selected', 
     containment: '#drag_container', 
     helper: 'clone', 
     start: function(ui, event) { 
      dragged = $(this).attr('id'); 
     } 
    }); 
    $("#selected").droppable({ 
     drop: function(event, ui) { 
      var ident = "#" + dragged; 
      $(ident).slideUp(100); 
     } 
    }); 

Tôi đã đăng một trang có toàn bộ HTML tại http://pastehtml.com/view/1by9nfd.html để bạn có thể chơi xung quanh nếu muốn. Hi vọng điêu nay co ich!

Answer 2

tôi cần chức năng này và đã tìm ra cách để làm điều này

sử dụng appendTo: "cơ thể" và thiết lập vị trí tuyệt đối trên đầu. Các yếu tố được kéo được nối vào cơ thể và là alwayz "đầu" của các yếu tố khác bởi vì vị trí của nó là absloute cho cơ thể.

$("#available > li").draggable({ 

    revert: 'invalid', 
    appendTo: 'body', 
    helper: 'clone', 
    connectToSortable: '#selected', 
    containment: '#drag_container', 

start: function(event, ui){ 

    $(ui.helper).css('position', 'absolute'); //helper if you are using clone 

}, 


stop: function(event, ui){ 

    $(ui.helper).css('position', 'relative'); // if you want 

} 

}); 

Hope this helps