在jQuery中排序多个选定项目可排序? [英] Sort multiple selected items in jQuery sortable?
问题描述
我正在尝试在jQuery可排序集中选择多个项目,然后将所选项目一起移动。
I'm trying to select more than one item in a jQuery sortable set and then move the selected items around together.
这是我的弱开始试图让它运作。这里是代码:
Here's my weak beginning of an attempt to make it work. And here's the code:
HTML:
<div class="container">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
</div>
JS:
$('.container div').draggable({
connectToSortable: '.container',
//How do I drag all selected items?
helper: function(e, ui) {
return $('.selected');
}
});
$('.container').sortable({
axis: 'y',
//How do I sort all selected items?
helper: function(e, ui) {
return $('.selected');
}
});
$('.container div').live('click', function(e) {
$(this).toggleClass('selected');
});
CSS:
body{background-color:#012;font-family:sans-serif;text-align:center;}
div{margin:5px 0;padding:1em;}
.container{width:52%;margin:1in auto;background-color:#555;border-radius:.5em;box-shadow:0 0 20px black;}
.container div{background-color:#333;color:#aaa;border:1px solid #777;background-color:#333;color:#aaa;border-radius:.25em;cursor:default;height:1em;}
.container div:hover{background-color:#383838;color:#ccc;}
.selected{background-color:#36a !important;border-color:#036 !important;color:#fff !important;font-weight:bolder;}
我不知道我是否朝着正确的方向前进。我无法在网上找到这方面的例子。 只需 批量 相关 问题 。有谁知道怎么做?
I don't know if I'm headed in the right direction or not. I can't find an example of this anywhere online. Just lots of related questions. Does anyone know how?
例如,如果我从6的列表中选择了第4项和第5项。我希望能够将4和5拖到获得此订单的顶部 - 4 5 1 2 3 6 - 或者如果我选择5和1并将它们拖到底部 - 2 3 4 6 1 5
For example, if I've selected items 4 and 5 out of a list of 6. I want to be able to drag 4 and 5 to the top of the set to get this order - 4 5 1 2 3 6 - Or if I selected 5 and 1 and drag them to the bottom - 2 3 4 6 1 5
推荐答案
这似乎适用于 multisortable 插件。代码如下。或者参见 jsFiddle 。
This seems to work with the multisortable plugin. Code below. Or see jsFiddle.
// ctrl + click to select multiple
$('.container').multisortable({
stop: function(e, ui) {
var $group = $('.ui-multisort-grouped').not(ui.item);
$group.clone().insertAfter($(ui.item));
$group.each(function() {
$(this).removeClass('ui-multisort-grouped');
});
$group.remove();
}
});
但是如果是多重的打破未来的jQuery版本?
But what if multisortable breaks with future jQuery versions?
这篇关于在jQuery中排序多个选定项目可排序?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!