jQuery Draggable + Sortable - Как перетащить между двумя прокручиваемыми списками

Question

Я хотел бы иметь два списка, доступные элементы и выбранные элементы, в которых доступным элементам присваиваются выбранные элементы с помощью перетаскивания. Мне нужно, чтобы выбранные элементы были сортируемыми, но не доступными элементами. Проблема состоит в том, что оба списка могут содержать значительное количество элементов и, следовательно, должны быть прокручиваемыми.

Вот 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).

Как только перемещаемый элемент входит в список доступных предметов, он исчезает за прокручиваемой рамкой. Я пробовал помощник клона, а также пытался играть с содержащими divs, разными опциями переполнения, отключая опцию прокрутки в jQuery, но не могу заставить ее работать правильно. Я уверен, что кто-то там совершил что-то вроде того, что я собираюсь сделать здесь, и может сэкономить какое-то время? :)

Любая помощь была бы принята с благодарностью!

Answer 1

Whew! Это было весело, чтобы исправить.

Первая проблема, когда список прокручивается вечно горизонтально, я исправил некоторые простые изменения переполнения в вашем 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' 
}); 

Снова это создало нежелательный эффект. Помощник clone делает так, чтобы исходный список никогда не удалял элементы. Чтобы исправить это, мне пришлось вручную создать функцию, которая удалит старый элемент. Что я сделал, так я добавил функцию start: к вашему перетаскиваемому объекту, который захватил идентификатор объекта и поместил его в переменную. Затем я создал droppable-объект вашего # выделенного списка и сделал там функцию drop :. Эта функция drop просто делает slUUp (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, так что вы можете играть вокруг, если вы хотите. Надеюсь это поможет!

Answer 2

мне нужна эта функциональность и нашел способ сделать это

использование appendTo: «тело» и установить позицию абсолютного на старте. Элемент, который перетаскивается, добавляется к телу и является alwayz «вершиной» других элементов, потому что его положение является абсолютным для тела.

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

} 

}); 

Надеется, что это помогает