jQueryUI可排序失败滚动 [英] JqueryUI sortable failed with scrolling

问题描述

我在应用程序中使用可排序的jqueryUI，因此出现以下问题:

I'm using jqueryUI sortable in my application so I have following problem:

jsFiddle

当您单击滚动条时，在此小提琴上可以看到sortable项目被拖动，无法将其放下.

As you can see on this fiddle when you clicked on scrollbar sortable item is dragged and there are no way to drop it.

我想做的是防止滚动时拖动元素.我所要做的是搜索可排序元素的事件，并尝试防止滚动，但这并不能按我的意愿工作.

What I want to do is prevent dragging element when it's scrolled. What I just do is searched events of sortable element, and try prevent scrolling but this doesn't work as I want.

任何帮助将不胜感激.

推荐答案

您可以创建宽度和高度为100％的内部div，您将其定义为手柄.这样，元素仍然可以拖动，但不能在滚动条上拖动. 并没有按照您的要求禁用滚动元素的拖动，但是我希望它仍然可以为您提供帮助.

You could create an inner-div with width and height 100% which you define as the handle. This way the element is still dragable but not on the scrollbar. It is not disabling scrolling elements from dragging as you requested but i hope it might help you anyways.

更新了小提琴

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%;
}

这篇关于jQueryUI可排序失败滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！