拖动而不滚动jQueryUI可排序元素

时间:2012-01-18 07:46:48

标签: jquery-ui jquery-ui-sortable

如果我有一个带有可排序元素的固定高度div,如果我将一个拖到下面的列表中,div将滚动。我以为我可以设置overflow:hidden,它隐藏滚动条但仍然滚动div。

在这个小提琴中描述要容易得多: http://jsfiddle.net/PrZNr/2/

如果我尝试在B1下拖动A1,则div会滚动,这可能会令用户感到沮丧。我该如何防止这种行为?

<div id="items">
    <ul class="sort">
        <li>Item A1</li>
        <li>Item A2</li>
        <li>Item A3</li>
        <li>Item A4</li>
        <li>Item A5</li>
        <li>Item A6</li>
        <li>Item A7</li>
        <li>Item A8</li>
        <li>Item A9</li>
        <li>Item A10</li>
    </ul>
</div>
<ul class="sort">
    <li>Item B1</li>
    <li>Item B2</li>
    <li>Item B3</li>
    <li>Item B4</li>
    <li>Item B5</li>
</ul>

<script>
$(function() {
    $('.sort').sortable({
        connectWith: '.sort',
        start: function() {
            $('#items').css({
                overflow: 'hidden'
            });
        },
        stop: function() {
            $('#items').css({
                overflow: 'auto'
            });
        }
    });
});
</script>

1 个答案:

答案 0 :(得分:6)

好吧,不知怎的,我忽略了显而易见的:“滚动”选项 我只需要将滚动设置为false ...

http://jsfiddle.net/PrZNr/3/