Question

我有一个很长的嵌套列表，我应用overflow-y：Auto，每个元素都附加了可排序的小部件。

现在我们面临的问题是拖动元素从滚动条容器中走出来是不可取的，我明白位置设置为绝对，z-Index为1000，我也理解拖动它考虑到父元素高度的元素，它让我向上拖动到那个计算的高度。

将位置更改为相对位置会让我仅在滚动条内拖动元素，但是它也会让我向上拖动太多。

所需行为：我们应该只能在滚动条内拖动元素，而且也不能超出最后一个元素底部偏移位置。

这段代码如下：

$(".sortableList").sortable({
axis: 'y',
containment: 'parent',
tolerance: 'pointer',
distance: 5,
start: function (event, ui) {
    $(ui.item).find('#contain').hide(10, 'swing');
    $(ui.item).addClass('setHeight');
    ui.placeholder.height(ui.item.height());
    $(".sortableList").sortable('refresh');
},
stop: function (event, ui) {
    $('#contain').show(10, 'swing');
    $(ui.item).removeClass('setHeight');
}

}）;

该问题的Js小提琴链接是：http://jsfiddle.net/hK7YT/2/

Answer 1

通过使用containment选项http://jsfiddle.net/tj_vantoll/hK7YT/3/，我能够实现这一目标。除非您将列表滚动到排序，否则包含工作正常 - 这是jQuery UI本身（http://bugs.jqueryui.com/ticket/9460）的文档问题。我建议在UI中为列表提供尽可能多的高度，以避免需要滚动。

可排序的可拖动元素超出滚动条

1 个答案: