jquery - JqueryUI sortable 滚动失败

Question

我在我的应用程序中使用 jqueryUI 可排序，所以我有以下问题：

jsFiddle

正如您在此小提琴中看到的那样，当您单击滚动条时，sortable项目被拖动并且无法放下它。

我想要做的是防止在滚动时拖动元素。我刚刚做的是搜索可排序元素的事件，并尝试防止滚动，但这并不像我想要的那样工作。

任何帮助，将不胜感激。

Answer 1

您可以创建一个宽度和高度为 100% 的内部 div，您将其定义为句柄。这样元素仍然可以拖动，但不能在滚动条上。它不会按照您的要求禁用滚动元素的拖动，但我希望它对您有所帮助。

更新的小提琴

HTML：

<div id="foo">
    <div id="bar" class="bar">
        <div class="innerBar"></div>
    </div>
    <div id="bar2" class="bar">
        <div class="innerBar"></div>
    </div>
</div>

JS：

$("#foo").sortable({handle: '.innerBar'});

CSS：

#foo div.bar {
    width: 100px;
    height:100px;
    float: left;
    background: red;
    margin: 10px;
}

#bar { 
    height: 200px;
    overflow-y: scroll;
}

.innerBar {
    width: 100%;
    height: 100%;
}