jQuery Draggable + Sortable - 如何在兩個可滾動列表之間拖放

我想要有兩個列表，可用項目和選定項目，可用項目通過拖放分配到選定項目。我要求所選項目是可排序的，但不是可用項目。挑戰在於兩個列表都可能包含大量的項目，因此需要進行滾動。jQuery Draggable + Sortable - 如何在兩個可滾動列表之間拖放

這裏是jQuery的我迄今：

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

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

以及相應的HTML：

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

隨着滾動列表的要求，但是，我不能得到可拖動行爲工作優雅（請參閱演示http://pastehtml.com/view/1bsk6bt.html）。

一旦被拖動的項目進入可用項目列表，它將消失在可滾動框架後面。我已經嘗試過克隆助手，並嘗試過使用包含div，不同的溢出選項，關閉jQuery中的滾動選項，但無法使其正常工作。我確定有人在那裏完成了我想要在這裏做的事情，並可以節省我一些時間？ :)

任何幫助將不勝感激！

來源

2010-11-05 mwalsher

Whe！這是一個有趣的修復。

第一個問題，在列表橫向滾動的情況下，我在CSS中修改了一些簡單的溢出更改。我從你的.drag_column中刪除了兩個溢出屬性，並將溢出：隱藏在.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; 
}

不幸的是，當我這樣做，當你從一個列表移動到另一個位置您拖動創建一個位置誤差（它會向上拍攝，這取決於列表您選擇的項目）。爲了解決這個問題，我在可拖動的創建函數中添加了「helper：clone」這一行。

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

再次，這產生了不良影響。克隆幫助器使得原始列表永遠不會刪除項目。爲了解決這個問題，我不得不手動創建一個可以刪除舊項目的函數。我做的是我爲你的可拖動對象添加了一個start：function，它抓住了對象id並將它放入一個變量中。然後，我創建了#selected列表中的可拖拽對象，並在那裏做了drop：function。該放置函數只需在對象上使用相匹配的id就可以執行slideUp（100）。請注意，我在腳本初始化時創建了一個變量 - 它修復了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); 
     } 
    });

我發佈了一個完整的HTML頁面，在http://pastehtml.com/view/1by9nfd.html，所以你可以玩，如果你想。希望這可以幫助！

來源

2010-11-16 22:33:33 jwegner

那麼，爲什麼滾動不會出現？如果您的項目多於視圖，則無法滾動查看它們。 – PartySoft 2011-02-02 21:38:19

我需要此功能，並發現了一個辦法做到這一點

使用appendTo：「身體」，並設置位置上開始絕對的。被拖動的元素被附加到身體上，並且是其他元素的「頂部」，因爲它的位置對身體來說是絕對的。

$("#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 

} 

});

希望這有助於

來源

2013-01-09 13:55:57

jQuery Draggable + Sortable - 如何在兩個可滾動列表之間拖放

回答

相關問題