如何在不同的选项卡之间拖放多个元素
How to drag and drop multiple elements between different tabs
我正在尝试在不同的选项卡之间拖放多个元素。
在这个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()
,并将所选项目附加到可排序的放置事件中。
$('.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 $('<ul/>').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;
}
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a>
</li>
<li><a href="#tabs-2">Proin dolor</a>
</li>
</ul>
<div id="tabs-1">
<ul id="sortable1" class="connectedSortable ui-helper-reset">
<li class="ui-state-default">
<input class="chbox" type="checkbox" />Item 1</li>
<li class="ui-state-default">
<input class="chbox" type="checkbox" />Item 2</li>
<li class="ui-state-default">
<input class="chbox" type="checkbox" />Item 3</li>
<li class="ui-state-default">
<input class="chbox" type="checkbox" />Item 4</li>
</ul>
</div>
<div id="tabs-2">
<ul id="sortable2" class="connectedSortable ui-helper-reset"></ul>
</div>
</div>
更新的Fiddle
相关文章:
- 无法在 JS 树和 JQ 网格行之间实现拖放
- JavaScript/jQuery在两个iframe之间拖放元素
- 如何通过在两个节点之间拖放来制作边缘,并在细胞空间中扩展 egdehandle 扩展.js
- HTML5 / Javascript - 在多个画布之间拖放不起作用的完美示例
- 是否可以使用 JQuery 或其他方法在两个浏览器窗口之间拖放一些内容
- 在 2 个多选之间拖放
- 使用指令在 1000 条记录上的两个表之间进行角度拖放
- 如何使用jquery在不同的Div之间拖放
- 拖放动态生成的两个表之间的所有单元格
- 如何实现两个表之间的拖放,与所有的内容
- 如何在两个表之间进行拖放编程
- 暂停在执行拖放时显示窗口的拖放事件的处理;在网格之间下降
- Javascript / jquery在两个树视图列表之间拖放
- 在IE 11的选项卡和窗口之间拖放
- Jquery排序禁用特定项之间的拖放
- jtree:防止在两个不同的树之间拖放
- HTML5在多个浏览器窗口之间拖放多个元素
- 拖放2个表之间使用Jquery排序与rowspan和colspan
- js在两张纸之间拖放元素
- 在contenteditable中的行或段落之间拖放