jQuery Sortable-拖放多个项目 [英] jQuery Sortable - drag and drop multiple items
本文介绍了jQuery Sortable-拖放多个项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下代码，该代码允许用户从一个列表拖放到另一个列表.现在，我如何允许用户选择并拖动&放多个物品?
I have the following code, which allows user to drag and drop from one list to another. Now, how can I allow the user to select and drag & drop multiple items?
是这样吗? http://jsfiddle.net/T68Fn/
我尝试将jsfiddle中的代码并入其中，但实际上无法使其正常工作.任何帮助都将受到高度赞赏.
I have tried to incorporate the code from the jsfiddle in, but can't really get it to work. Any help is highly appreciated.
请帮帮我.非常感谢.
HTML
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
</head>
<body>
<div id="maincontainer">
<div id="navtoplistline"> </div>
<div id="contentwrapper">
<div id="maincolumn">
<div class="text">
<hr />
<div class="listBlock">
<h2>Available</h2>
<ul id="sortable1" class='droptrue'>
<li class="ui-state-default" id="article_1">Article #1</li>
<li class="ui-state-default" id="article_2">Article #2</li>
<li class="ui-state-default" id="article_3">Article #3</li>
</ul>
</div>
<div class="listBlock">
<h2>My Articles</h2>
<ul id="sortable2" class='droptrue'></ul>
</div>
<br clear="both" />
<p>Which articles, in which order?:
<br />
<input type="text" id="postOrder" name="postOrder" value="" size="30" />
</p>
</div>
</div>
</div>
</div>
</body>
</html>
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(','));
}
推荐答案
One way is to create a custom helper with the selected items, hide the items while dragging and manually append the selected items upon receive.
这是我的尝试:
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 = $('<ul/>');
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 = $('<ul/>');
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;
}
<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="maincontainer">
<div id="navtoplistline"> </div>
<div id="contentwrapper">
<div id="maincolumn">
<div class="text">
<hr />
<div class="listBlock">
<h2>Available</h2>
<ul id="sortable1" class='droptrue'>
<li id="article_1">Article #1</li>
<li id="article_2">Article #2</li>
<li id="article_3">Article #3</li>
</ul>
</div>
<div class="listBlock">
<h2>My Articles</h2>
<ul id="sortable2" class='droptrue'></ul>
</div>
<br clear="both" />
<p>Which articles, in which order?:
<br />
<input type="text" id="postOrder" name="postOrder" value="" size="30" />
</p>
</div>
</div>
</div>
</div>
这篇关于jQuery Sortable-拖放多个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
