如何将不同的列表框项目拖放到一起
How to drag and drop different list box items together
我有两个列表框。它彼此相邻放置。用户可以单独对每个列表进行排序,然后我提供了一个复选框。如果选中复选框,则项目将水平地相互绑定,然后向前,如果用户从左侧列表框中选择一个元素,则右侧列表框中的相邻元素也将被选中,然后一起移动以进行重新排序(排序)。你能帮我选择两个元素并一起移动吗。
我终于通过以下方式做到了这一点。
我对这两个列表都使用了jquery sortable。
在activate可调用中,获得原始列表项
activate: function(event, ui){
srcList = $('#source-container ul.sourceList li');
},
在停止可调用中
stop: function(event, ui){
$(srcList).each(function(idx, elem){
if($(elem).equals($(ui.item)))
orgIndex = idx;
});
$('#source-container ul.sourceList li').each(function(idx, elem){
if($(elem).equals($(ui.item)))
curIndex = idx;
});
$('#target-container ul.targetList li').each(function(idx, elem){
if(idx == orgIndex){
var toIndex = curIndex + 1;
var fromIndex = orgIndex + 1;
if(toIndex < fromIndex)
$('#target-container ul.targetList li:nth-child('+fromIndex+')').insertBefore($('#target-container ul.targetList li:nth-child('+toIndex+')'));
else
$('#target-container ul.targetList li:nth-child('+fromIndex+')').insertAfter($('#target-container ul.targetList li:nth-child('+toIndex+')'));
}
相关文章:
- html5拖放确定拖动项目的来源
- 如何允许我的访问者通过拖放来排列列表项目
- 有角度的拖放可在单独的容器中列出项目
- 如何使 ExtJS 拖放树仅复制 - 而不是从显示中删除项目
- 容器中的多个项目(拖放)
- Extjs使用复选框模型在网格上拖放单个项目
- jQuery拖放绑定多个项目
- 当在可排序网格中垂直拖放项目时,垂直对齐将中断
- 限制容器内可拖放项目的数量
- Jquery UI拖拽和排序- 2次出现被拖放的项目
- 使用Dragula拖放保存拖动项目的位置,React版本(React - Dragula)
- JQuery UI拖放显示警报时,项目到达目的地
- 如何在拖放时获得可拖动项目的相对位置
- 从父框架中拖动一个项目,并将其放入子框架中的可拖放对象中
- 防止电子应用程序重定向时,拖放项目在窗口
- 如何获得一个可拖放项目的id,当我点击可拖放项目
- 拖放多个项目html5
- 如何使用jQuery或JavaScript拖放多个项目
- Dojo拖放:如何检索项目的顺序
- HTML表格与rowspan重新排序项目拖放问题