如何在不同选项卡之间拖放多个元素
我试图在不同的选项卡之间拖放多个元素。
在这个jsfiddle中 ，当一个项目被拖动时，我想拖动所有其他选中的项目，就像Gmail将多个电子邮件从inbox移动到另一个文件夹时一样。
我认为有必要使用ui.helper但我没有足够的查询技巧。
以下是我目前正在使用的代码：
$( "#sortable1, #sortable2" ).sortable().disableSelection(); var $tabs = $( "#tabs" ).tabs(); var $tab_items = $( "ul:first li", $tabs ).droppable({ accept: ".connectedSortable li", hoverClass: "ui-state-hover", drop: function( event, ui ) { var $item = $( this ); var $list = $( $item.find( "a" ).attr( "href" ) ) .find( ".connectedSortable" ); ui.draggable.hide( "slow", function() { $tabs.tabs( "option", "active", $tab_items.index( $item ) ); $( this ).appendTo( $list ).show( "slow" ); }); } });
经过大量的摆弄，我根据我的答案提出了以下内容
基本上我们使用data()保存选定的项目，将标签初始化为droppable()并将所选项目附加到dropable事件中。
$('.connectedSortable').on('click', 'input', function() { $(this).parent().toggleClass('selected'); }); $("#sortable1, #sortable2").sortable({ revert: 0, 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'); return $('
').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); }, 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'); $(this).find('input:checked').prop('checked', false); } }); var $tabs = $("#tabs").tabs(), $tab_items = $("ul:first li", $tabs).droppable({ accept: "ul, .connectedSortable li", hoverClass: "ui-state-hover", drop: function(event, ui) { var $item = $(this), $elements = ui.draggable.data('items'), $list = $($item.find("a").attr("href")).find(".connectedSortable"); ui.draggable.show().hide("slow", function() { $tabs.tabs("option", "active", $tab_items.index($item)); $(this).appendTo($list).show("slow").before($elements.show("slow")); }); } });
ul { list-style-type: none; } .connectedSortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } .chbox { margin-right: 10px; } .selected { background: red !important; } .hidden { display: none !important; }