gpt4 book ai didi

javascript - 重新排列图 block

转载 作者:太空宇宙 更新时间:2023-11-04 15:19:40 28 4
gpt4 key购买 nike

我有两组图 block ,如下图所示。每个图 block 都是一个 DIV。

enter image description here

我希望能够将图 block 拖动到组内的新位置或相邻组内的新位置。

和windows 8类似,我也希望能够将一个组中的一个tile拖到两个组之间的空间,为该tile创建一个新组。

enter image description here

这是我能够达到的程度 - 我能够创建一个可拖动排序的单个组。

<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 个磁贴组实现:

http://jsfiddle.net/dazefs/XRdz6/

关于javascript - 重新排列图 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10743468/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com