Opened 10 years ago

Last modified 18 months ago

#4441 open bug

Selectable: Mousedown on scrollbar start selectable

Reported by: Ludovic Owned by:
Priority: minor Milestone: 2.0.0
Component: ui.selectable Version: 1.7.1
Keywords: Cc:
Blocked by: Blocking:


Under Firefox, when you click on your scrollbar, it starts selection.

The selectable size is scrollWidth and not innerWidth.

It means that if e.layerX > scrollWidth, don't start.

Same for scrollHeight.

Attachments (1)

4441_partial_patch.diff (940 bytes) - added by tzellman 10 years ago.

Download all attachments as: .zip

Change History (11)

comment:1 Changed 10 years ago by Jörn Zaefferer

Milestone: TBD1.7.2

comment:2 Changed 10 years ago by Jörn Zaefferer


comment:3 Changed 10 years ago by tzellman

I attached a "partial fix" for this ticket. One workaround is to allow the user to "cancel" the start operation by returning false from the triggered "start" method; the ui.selectable code would obviously then need to respect that and return before doing the select operation.

Also, to get around the issue of scrolling I added this check in my "start" method (which could probably be expanded on and added to the _mouseStart method directly).

    myTable.selectable({filter: 'tr',
        start: function(event, ui) {
            var t =;
            if (event.pageX > t.offsetWidth + t.offsetLeft)
                return false;

Changed 10 years ago by tzellman

Attachment: 4441_partial_patch.diff added

comment:4 Changed 9 years ago by Sam Hasler

Doing it on the start event didn't work. This stackoverflow question has the following solution:

$(function() {
    $("#selectable").mousedown(function (evt) {
        return false;

comment:5 Changed 9 years ago by Sam Hasler

I spoke too soon, that actually stops the selectables from being selectable.

comment:6 Changed 9 years ago by jmrandol

My issue was with the scrollbar on a tbody and this worked for me at the beginning of ui.mouse _mouseDown:

if (event.pageX > this.element.width()) {

return true;


comment:7 Changed 8 years ago by parajulik

One workaround I found (and that could be used to fix this bug) is to wrap the sortable items with two divs. Then, Initialize selectable on the inner div, and set overflow to scroll on the outer div.

This way, your scrollbar lies on the outer div which is not a part of the selectable.

comment:8 Changed 6 years ago by Scott González


comment:9 Changed 6 years ago by tj.vantoll

Status: newopen
Summary: Mousedown on scrollbar start selectableSelectable: Mousedown on scrollbar start selectable

Verified this is still an issue as of 1.9.1 -

comment:10 Changed 18 months ago by rpoconn

I know this issue hasn't been touched in 5 years, but I found a decent solution - This solution builds on Sam's original, but allows drag select to work in any blank canvas area that aren't scrollbars. It works by detecting if the point of the click that is beyond the view area.

        $("#selectable").mousedown((event : JQueryEventObject) : void => {
            if (event.offsetX >= | | event.offsetY >= {
Last edited 18 months ago by Ryan J Ollos (previous) (diff)
Note: See TracTickets for help on using tickets.