Question

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

jsFiddle

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.

Any help would be appreciated.

Answer 1

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.

updated fiddle

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