我需要一个从一列拖动项目并使用jquery
将其放入另一列的示例那里有没有这样的例子?
答案 0 :(得分:7)
您可以使用jquery sortable执行此操作:http://jqueryui.com/demos/sortable/#connect-lists
答案 1 :(得分:4)
这里我使用jquery UI sortable完成了完整的bin。我认为它应该对你有所帮助。
演示: http://codebins.com/bin/4ldqp9g
<强> HTML:强>
<div class="demo">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">
Item 1
</li>
<li class="ui-state-default">
Item 2
</li>
<li class="ui-state-default">
Item 3
</li>
<li class="ui-state-default">
Item 4
</li>
<li class="ui-state-default">
Item 5
</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">
Item 1
</li>
<li class="ui-state-highlight">
Item 2
</li>
<li class="ui-state-highlight">
Item 3
</li>
<li class="ui-state-highlight">
Item 4
</li>
<li class="ui-state-highlight">
Item 5
</li>
</ul>
</div>
<!-- End demo -->
<div class="demo-description">
<p>
Sort items from one list into another and vice versa, by passing a selector
into the
<code>
connectWith
</code>
option. The simplest way to do this is to
group all related lists with a CSS class, and then pass that class into the
sortable function (i.e.,
<code>
connectWith: '.myclass'
</code>
).
</p>
</div>
<强> CSS:强>
#sortable1, #sortable2
{
list-style-type: none;
margin: 0;
padding: 0 0 2.5em;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li
{
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
overflow:visible;
display:block;
}
<强> JQuery的:强>
$(function() {
var itemclone, idx;
$("#sortable1, #sortable2").sortable({
start: function(event, ui) {
//create clone of current seletected li
itemclone = $(ui.item).clone();
//get current li index position in list
idx = $(ui.item).index();
//If first li then prepend clone on first position
if (idx == 0) {
itemclone.css('opacity', '0.5');
$(this).prepend(itemclone);
}
//Else Append Clone on its original position
else {
itemclone.css('opacity', '0.7');
$(this).find("li:eq(" + (idx - 1) + ")").after(itemclone);
}
},
change: function(event, ui) {
//While Change event set clone position as relative
$(this).find("li:eq(" + idx + ")").css('position', 'relative');
},
stop: function() {
//Once Finish Sort, remove Clone Li from current list
$(this).find("li:eq(" + idx + ")").remove();
},
connectWith: ".connectedSortable"
}).disableSelection();
});