jQuery Sortable – 拖放多个项目

我有以下代码，允许用户从一个列表拖放到另一个列表。 现在，我如何允许用户选择并拖放多个项目？

像这样的东西？ http://jsfiddle.net/T68Fn/

我试图将jsfiddle中的代码合并到一起，但无法让它真正起作用。 任何帮助都非常感谢。

请帮帮我。 非常感谢你。

HTML

      
 
 
 
 
 
 
 
 
Available
 
 
Article #1
 
Article #2
 
Article #3
 
 
 
 
My Articles
 
 
 
 
Which articles, in which order?: 
  
 
 
 
 
   

CSS

 .listBlock { float: left; } #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; margin-right: 100px; background: #eee; padding: 5px; width: 300px; border: 1px solid black; } #sortable1 li, #sortable2 li { cursor: move; margin: 5px; padding: 5px; font-size: 1.2em; width: 250px; background: none; background-color: white; } 

脚本

  $(function() { $("ul.droptrue").sortable({ connectWith: 'ul', opacity: 0.6, update : updatePostOrder }); $("#sortable1, #sortable2").disableSelection(); $("#sortable1, #sortable2").css('minHeight',$("#sortable1").height()+"px"); updatePostOrder(); }); function updatePostOrder() { var arr = []; $("#sortable2 li").each(function(){ arr.push($(this).attr('id')); }); $('#postOrder').val(arr.join(',')); } 

Answer 1

一种方法是使用所选项目创建自定义帮助程序 ，在拖动时隐藏项目并在接收时手动附加所选项目。

这是我的尝试：

CSS

 .selected { background:red !important; } .hidden { display:none; } 

脚本：

  $('.droptrue').on('click', 'li', function () { $(this).toggleClass('selected'); }); $("ul.droptrue").sortable({ connectWith: 'ul.droptrue', opacity: 0.6, revert: true, helper: function (e, item) { //create custom helper if(!item.hasClass('selected')) item.addClass('selected'); // clone selected items before hiding var elements = $('.selected').not('.ui-sortable-placeholder').clone(); //hide selected items item.siblings('.selected').addClass('hidden'); var helper = $('
'); return helper.append(elements); }, start: function (e, ui) { var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder'); //store the selected items to item being dragged ui.item.data('items', elements); }, receive: function (e, ui) { //manually add the selected items before the one actually being dragged ui.item.before(ui.item.data('items')); }, stop: function (e, ui) { //show the selected items after the operation ui.item.siblings('.selected').removeClass('hidden'); //unselect since the operation is complete $('.selected').removeClass('selected'); }, update: updatePostOrder }); 

 $(function () { $('.droptrue').on('click', 'li', function () { $(this).toggleClass('selected'); }); $("ul.droptrue").sortable({ connectWith: 'ul.droptrue', opacity: 0.6, revert: true, helper: function (e, item) { console.log('parent-helper'); console.log(item); if(!item.hasClass('selected')) item.addClass('selected'); var elements = $('.selected').not('.ui-sortable-placeholder').clone(); var helper = $('
'); item.siblings('.selected').addClass('hidden'); return helper.append(elements); }, start: function (e, ui) { var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder'); ui.item.data('items', elements); }, receive: function (e, ui) { ui.item.before(ui.item.data('items')); }, stop: function (e, ui) { ui.item.siblings('.selected').removeClass('hidden'); $('.selected').removeClass('selected'); }, update: updatePostOrder }); $("#sortable1, #sortable2").disableSelection(); $("#sortable1, #sortable2").css('minHeight', $("#sortable1").height() + "px"); updatePostOrder(); }); function updatePostOrder() { var arr = []; $("#sortable2 li").each(function () { arr.push($(this).attr('id')); }); $('#postOrder').val(arr.join(',')); } 

 .listBlock { float: left; } #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; margin-right: 100px; background: #eee; padding: 5px; width: 300px; border: 1px solid black; } #sortable1 li, #sortable2 li { color:black; cursor: move; margin: 5px; padding: 5px; font-size: 1.2em; width: 250px; background: none; background-color: white; } .selected { background:red !important; } .hidden { display:none !important; } ul { list-style-type: none; } 

   
 
 
 
 
 
 
 
 
Available
 
 
Article #1
 
Article #2
 
Article #3
 
 
 
 
My Articles
 
 
 
 
Which articles, in which order?: