[英]JQuery Sortable and Draggable - Moving both horizontally and vertically
我在屏幕上有一组以网格形式排列的元素(例如3x3矩阵)。
<div>Part_1_1 Part_1_2 Part_1_3</div>
<div>Part_2_1 Part_2_2 Part_2_3</div>
<div>Part_3_1 Part_3_2 Part_3_3</div>
我需要能够垂直和水平移动每一行/列,而我不能移动单个元素。 每行都包含在一个div中(每个部分又包含在其自己的div容器中)。 结果,我可以垂直移动每一行。
除此之外,我还需要水平移动每列。 我不确定该怎么做。
也许您可以尝试在行级别应用排序,然后在回调中更新其余行。
您还可以设置其样式以使其具有垂直行的外观。
HTML:
<ul id="sortable">
<li class="ui-state-default"><span class="col1">11</span><span class="col2">12</span><span class="col3">13</span></li>
<li class="ui-state-default"><span class="col1">21</span><span class="col2">22</span><span class="col3">23</span></li>
<li class="ui-state-default"><span class="col1">31</span><span class="col2">32</span><span class="col3">33</span></li>
</ul>
JavaScript:
$("#sortable li").sortable({
stop: function( event, ui ) {
var index = ui.item.index();
$("."+$(ui.item).attr("class")).each(function(){
if(this!=ui.item[0]){
var list = $(this).closest("li");
$(this).detach()
if($(list.children().get(index)).length>0)
$(list.children().get(index)).before(this);
else
$(list).append(this);
}
})
}
});
我添加了小提琴示例: http : //jsfiddle.net/UAcC7/536/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.