Selectable: Mousedown on scrollbar start selectable

[Ludovic]

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.

[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 = event.target;
            if (event.pageX > t.offsetWidth + t.offsetLeft)
            {
                return false;
            }
        }
    });

[Sam Hasler]

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

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

[Sam Hasler]

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

[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;

}

[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.

[tj.vantoll]

Verified this is still an issue as of 1.9.1 - ​http://jsfiddle.net/tj_vantoll/4fGTM/.

[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.target.clientWidth | | event.offsetY >= event.target.clientHeight) {
                event.stopImmediatePropagation();
            }
        });