我有两组瓷砖,如下图所示。每个瓷砖都是DIV。
我希望能够将图块拖动到组内的新位置或相邻组内的新位置。
与Windows 8类似,我还希望能够将组中的图块拖动到两个组之间的空间,以便为图块创建新组。
这是我能走多远 - 我能够创建一个可拖动排序的组。
<div class="demo">
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default wide">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
</ul>
</div>
http://jsfiddle.net/psivadasan/FmWCx/
感谢任何帮助。谢谢你的时间。
答案 0 :(得分:3)
我过去做过类似的事情,这就是我实现它的方式:http://jsfiddle.net/dazefs/vGYVX/
<div style="background-color:Gray">
<ul id="sortable">
<li>
<span style="background-color:yellow">
Item 1
</span>
</li>
<li>
<span style="background-color:red">
Item 2
</span>
</li>
<li>
<span style="background-color:green">
Item 3
</span>
</li>
<li>
<span style="background-color:Blue">
Item 4
</span>
</li>
</ul>
<ul id="sortable2" style="width:60%">
<li>
<span style="background-color:yellow">
Item 5
</span>
</li>
<li>
<span style="background-color:red">
Item 6
</span>
</li>
<li>
<span style="background-color:green">
Item 7
</span>
</li>
<li>
<span style="background-color:Blue">
Item 8
</span>
</li>
</ul>
</div>
$(function () {
$("#sortable, #sortable2").sortable({
connectWith: "#sortable2, #sortable",
receive: function (event, ui) {
alert('item has been sorted');
}
});
//})
});
要实现3个图块组:
答案 1 :(得分:2)
小提琴:http://jsfiddle.net/iambriansreed/A8NYw/
$(function() {
$("#sortable1,#sortable2")
.sortable({ connectWith: ".sortable"})
.disableSelection();
});