jQuery UI可排序-多连接列表拖动
jQuery UI Sortable - Multi Connected List Drag
使用jQuery UI Sortable,可以在拖动项目时滚动可排序项目容器。
我有多个可排序列表连接在具有最大高度和溢出卷轴的单独容器中:
<div class="list">
<div class="item">A1</div>
<div class="item">A2</div>
<div class="item">A3</div>
<div class="item">A4</div>
<div class="item">A5</div>
</div>
<div class="list">
<div class="item">B1</div>
<div class="item">B2</div>
<div class="item">B3</div>
<div class="item">B4</div>
<div class="item">B5</div>
</div>
当项目在每个容器之间拖动时,我需要能够滚动它们。
目前,拖动只滚动父容器-我们需要它能够滚动连接的列表容器。
有关基本设置,请参阅此代码笔:http://codepen.io/typ90/pen/pymOdV
我尝试过在sortable上使用helper选项来克隆项目并附加到其他容器,因为它被拖来拖去很不走运。
有什么想法吗?
只需将以下代码添加到sortable
配置部分:
over: function (e, ui) {
$(ui.sender).sortable('instance').scrollParent = $(e.target)
}
它将是这样的:
$('.list').sortable({
items: '.item',
connectWith: '.list',
over: function (e, ui) {
$(ui.sender).sortable('instance').scrollParent = $(e.target)
}
});
具有助手和克隆的解决方案
$('.list').sortable({
connectWith: '.list',
placeholder: 'ui-state-highlight',
helper: function (event, element) {
return element.clone().appendTo($('.connectedSortable').not(element.parent()));
}
});
在我的案例中,由于排序元素的z索引问题,无法使用only选项"clone"。
信贷流向https://stackoverflow.com/users/2117156/jamie-barker
在我遇到与OP相同问题的情况下,接受的答案不是解决方案。我在接受的答案中出现了错误。
然而,它非常接近。我只需要检查ui.sender
是否是一个真实的值。
$('.list').sortable({
items: '.item',
connectWith: '.list',
over: function (e, ui) {
if (ui.sender) {
$(ui.sender).sortable('instance').scrollParent = $(e.target)
}
}
});
相关文章:
- jQuery UI可排序-多连接列表拖动
- 对级联下拉列表使用不同的连接字符串
- 单击已连接的可排序项时查找列表文本
- 如何在同一个网页上创建两个连接列表
- Jquery幻灯片中的列表,连接第一个和最后一个列表元素以创建旋转木马
- 链接下拉列表选择列表代码 -- 连接数据
- Jquery:连接列表计数器
- 保存动态创建的 jQuery 连接可排序列表的顺序
- 在 d3.js 中填充已连接节点的选择列表
- 如何将 jQuery UI 连接列表拖放限制为单个方向
- 断开连接时更新客户端中的用户列表
- 在连接到可拖动列表的 jQuery 可排序项中,我如何告诉特定列表项可拖动项被放置到
- 如何将地点列表与谷歌地图点连接起来
- 如何使用 DOM 而不是在 HTML 连接上创建包含格式化项的列表
- 如何区分在同一列表中拖动和从一个列表移动到连接列表时的可排序更新事件
- jQuery可排序连接列表-获取列表id和数据值的排序值
- jQuery可排序-将放置在外部的项目移动到连接列表
- 在按钮后连接列表
- jQueryUI可排序连接列表-当项目滚动到新列表中时,未触发Over事件
- 分页对象的连接列表