Opened 14 years ago

Last modified 6 years 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 14 years ago.

Download all attachments as: .zip

Change History (11)

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

Milestone: TBD1.7.2

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


comment:3 Changed 14 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 14 years ago by tzellman

Attachment: 4441_partial_patch.diff added

comment:4 Changed 13 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 13 years ago by Sam Hasler

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

comment:6 Changed 13 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 13 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 11 years ago by Scott González


comment:9 Changed 11 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 6 years 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 6 years ago by Ryan J Ollos (previous) (diff)
Note: See TracTickets for help on using tickets.