JQuery UI Selectable Box Dimensions / Properties

Question

Basically, I'd like to set the tolerance to fit when I drag the mouse from left to right, and touch when I go from right to left (akin to how CAD programs do it). I've looked around and, besides modifying the standard JQuery UI code to move at least 2 variables into a global scope (I'd prefer not to modify any of the standard files), there doesn't seem to be a method of doing this.

The current method I can see involves modifying the _mouseDrag function within selectable method, so as to move the x1 and x2 variables to a more global state to read them (they represent the start and end points of the selected area box horizontally).

To clarify:

• JQuery = 1.10.2 (Same as in the JQuery UI demo's)
• JQuery UI = 1.11.4 (Same as in the JQuery UI demo's) (Line 12059 is the start of _mouseDrag)
• Browser = Firefox on Ubuntu 14.04, everything up to date

Answer 1

You can check on mousemove if the clientX is less or more than clientX on the start event and modify the tolerance option depending. Like this:

       start: function (e, ui) {
            startX = e.clientX;
            $('#selectable').mousemove(function (e) {
                if (e.clientX < startX) {
                    $('#selectable').selectable('option', 'tolerance', 'touch');
                } else {
                    $('#selectable').selectable('option', 'tolerance', 'fit');
                }
            });
        }

http://jsfiddle.net/8fpr6c14/2/