我有两组图 block ,如下图所示。每个图 block 都是一个 DIV。
我希望能够将图 block 拖动到组内的新位置或相邻组内的新位置。
与 Windows 8 类似,我也希望能够将组中的图 block 拖动到两个组之间的空间,以便为该图 block 创建一个新组。
这是我能够达到的程度 - 我能够创建一个可拖动排序的组。
<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/
感谢任何帮助。感谢您抽出时间。
最佳答案
我过去做过类似的事情,这就是我实现它的方法: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 个图 block 组实现:
关于javascript - 重新排列图 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10743468/