【问题标题】:Drag without scrolling on a jQueryUI sortable element拖动而不滚动 jQueryUI 可排序元素
【发布时间】:2012-01-18 07:46:47
【问题描述】:

如果我有一个带有可排序元素的固定高度 div,并且如果我将一个元素拖到下面的列表中,则该 div 将滚动。我想我可能可以设置溢出:隐藏,隐藏滚动条但仍然滚动div。

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

如果我尝试将 A1 拖到 B1 下,则 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>

【问题讨论】:

  • 您是否需要 #items .sort 才能进行排序,或者它只是将要进入另一个列表的可拖动内容的来源?
  • 是的,它也需要是可排序的

标签: jquery-ui jquery-ui-sortable


【解决方案1】:

好吧,不知何故我忽略了明显的:“滚动”选项 我只需要将滚动设置为 false...

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

【讨论】:

  • 在我的情况下是可以的,但是我在使用滚动选项时发现了很多错误,它导致其他连接的列表无法正常工作。甚至小提琴似乎也无法正常工作。例如,如果您尝试将 A1 拖到 B1 下方。我一定以某种方式忽略了这一点。无论哪种方式,滚动都难以依赖。
  • @ActionOwl:我在 JSfiddle 中查看了您的示例。垂直滚动条完美消失。但是,当我尝试拖动元素时,我仍然可以看到屏幕底部的水平滚动条。如何在不将容器(页面本身)的“溢出”属性设置为隐藏的情况下删除它?
  • @Ishita,您可以将列表包装在容器中并使用包含选项来防止元素被拖动,从而为您提供水平滚动条。这是小提琴。 jsfiddle.net/PrZNr/103
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-01-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多