Merge pull request #209 in ~GUY/fineui from ~WINDY/fineui:master to master

* commit 'ffd45a9da30271b2858a4d24ec4c0b0e5644db78':
  BI-11253 去jquery ui

bi/sliders.js

@@ -100,56 +100,11 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
         this.sliderOne = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderOne.element.draggable({
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelOnePosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                self.labelOne.setValue(v);
-                self.valueOne = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderOnePosition(significantPercent);
-                self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
-                ui.helper.removeClass("dragging");
-            },
-            start: function (e, ui) {
-                ui.helper.removeClass("dragging").addClass("dragging");
-            }
-        });
-
         this.sliderTwo = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderTwo.element.draggable({
+        this._draggable(this.sliderOne, true);
-            axis: "x",
+        this._draggable(this.sliderTwo, false);
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelTwoPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                self.labelTwo.setValue(v);
-                self.valueTwo = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderTwoPosition(significantPercent);
-                self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
-            }
-        });
         this._setVisible(false);
 
         BI.createWidget({
@@ -179,6 +134,70 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
         })
     },
 
+    _rePosBySizeAfterMove: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        var v = this._getValueByPercent(significantPercent);
+        v = this._assertValue(v);
+        if(isLeft){
+            this._setLabelOnePosition(significantPercent);
+            this._setSliderOnePosition(significantPercent);
+            this.labelOne.setValue(v);
+            this.valueOne = v;
+        }else{
+            this._setLabelTwoPosition(significantPercent);
+            this._setSliderTwoPosition(significantPercent);
+            this.labelTwo.setValue(v);
+            this.valueTwo = v;
+        }
+        this._setBlueTrack();
+    },
+
+    _rePosBySizeAfterStop: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        isLeft ? this._setSliderOnePosition(significantPercent) : this._setSliderTwoPosition(significantPercent);
+    },
+
+    _draggable: function (widget, isLeft) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                self._rePosBySizeAfterMove(size, isLeft);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                self._rePosBySizeAfterStop(size, isLeft);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createLabelWrapper: function () {
         var c = this._constant;
         return {
@@ -371,13 +390,8 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
     },
 
     _setDraggableEnable: function (enable) {
-        if (enable) {
+        this.sliderOne.setEnable(enable);
-            this.sliderOne.element.draggable("enable");
+        this.sliderTwo.setEnable(enable);
-            this.sliderTwo.element.draggable("enable")
-        } else {
-            this.sliderOne.element.draggable("disable");
-            this.sliderTwo.element.draggable("disable")
-        }
     },
 
     _getPrecision: function () {
@@ -542,56 +556,12 @@ BI.IntervalSliderLabel = BI.inherit(BI.Widget, {
         this.sliderOne = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderOne.element.draggable({
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelOnePosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.labelOne.setValue(v);
-                self.labelOne.setText(v + o.unit);
-                self.valueOne = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderOnePosition(significantPercent);
-                self.fireEvent(BI.IntervalSliderLabel.EVENT_CHANGE);
-            }
-        });
 
         this.sliderTwo = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderTwo.element.draggable({
+        this._draggable(this.sliderOne, true);
-            axis: "x",
+        this._draggable(this.sliderTwo, false);
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelTwoPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.labelTwo.setValue(v);
-                self.labelTwo.setText(v + o.unit);
-                self.valueTwo = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderTwoPosition(significantPercent);
-                self.fireEvent(BI.IntervalSliderLabel.EVENT_CHANGE);
-            }
-        });
         this._setVisible(false);
 
         BI.createWidget({
@@ -621,6 +591,70 @@ BI.IntervalSliderLabel = BI.inherit(BI.Widget, {
         })
     },
 
+    _rePosBySizeAfterMove: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        var v = this._getValueByPercent(significantPercent);
+        v = this._assertValue(v);
+        if(isLeft){
+            this._setLabelOnePosition(significantPercent);
+            this._setSliderOnePosition(significantPercent);
+            this.labelOne.setValue(v);
+            this.valueOne = v;
+        }else{
+            this._setLabelTwoPosition(significantPercent);
+            this._setSliderTwoPosition(significantPercent);
+            this.labelTwo.setValue(v);
+            this.valueTwo = v;
+        }
+        this._setBlueTrack();
+    },
+
+    _rePosBySizeAfterStop: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        isLeft ? this._setSliderOnePosition(significantPercent) : this._setSliderTwoPosition(significantPercent);
+    },
+
+    _draggable: function (widget, isLeft) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                self._rePosBySizeAfterMove(size, isLeft);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                self._rePosBySizeAfterStop(size, isLeft);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.IntervalSliderLabel.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createLabelWrapper: function () {
         var c = this._constant;
         return {
@@ -807,13 +841,8 @@ BI.IntervalSliderLabel = BI.inherit(BI.Widget, {
     },
 
     _setDraggableEnable: function (enable) {
-        if (enable) {
+        this.sliderOne.setEnable(enable);
-            this.sliderOne.element.draggable("enable");
+        this.sliderTwo.setEnable(enable);
-            this.sliderTwo.element.draggable("enable")
-        } else {
-            this.sliderOne.element.draggable("disable");
-            this.sliderTwo.element.draggable("disable")
-        }
     },
 
     _getPrecision: function () {
@@ -1218,28 +1247,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
         this.slider = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.slider.element.draggable({
+        this._draggable(this.slider);
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
-                self._setLabelPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.label.setValue(v);
-                self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
-            }
-        });
         var sliderVertical = BI.createWidget({
             type: "bi.vertical",
             items: [{
@@ -1342,6 +1350,56 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
         })
     },
 
+    _draggable: function (widget) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                self._setBlueTrack(significantPercent);
+                self._setLabelPosition(significantPercent);
+                self._setSliderPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                v = o.digit === false ? v : v.toFixed(o.digit);
+                self.label.setValue(v);
+                self.value = v;
+                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderPosition(significantPercent);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createTrackWrapper: function () {
         return BI.createWidget({
             type: "bi.absolute",
@@ -1511,28 +1569,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, {
         this.slider = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.slider.element.draggable({
+        this._draggable(this.slider);
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
-                self._setLabelPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.label.setText(v + o.unit);
-                self.value = v;
-                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
-                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
-            }
-        });
         var sliderVertical = BI.createWidget({
             type: "bi.vertical",
             items: [{
@@ -1614,6 +1651,56 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, {
         })
     },
 
+    _draggable: function (widget) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                self._setBlueTrack(significantPercent);
+                self._setLabelPosition(significantPercent);
+                self._setSliderPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                v = o.digit === false ? v : v.toFixed(o.digit);
+                self.label.setValue(v);
+                self.value = v;
+                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderPosition(significantPercent);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createTrackWrapper: function () {
         return BI.createWidget({
             type: "bi.absolute",
@@ -1769,25 +1856,7 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
         this.slider = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.slider.element.draggable({
+        this._draggable(this.slider);
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                self.value = v;
-                self.fireEvent(BI.SingleSliderNormal.EVENT_DRAG, v);
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
-            }
-        });
 
         var sliderVertical = BI.createWidget({
             type: "bi.vertical",
@@ -1849,6 +1918,54 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
         }
     },
 
+    _draggable: function (widget) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                self._setBlueTrack(significantPercent);
+                self._setSliderPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                v = o.digit === false ? v : v.toFixed(o.digit);
+                self.value = v;
+                self.fireEvent(BI.SingleSliderNormal.EVENT_DRAG, v);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderPosition(significantPercent);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createTrack: function () {
         var self = this;
         var c = this._constant;

dist/sliders.js

@@ -100,56 +100,11 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
         this.sliderOne = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderOne.element.draggable({
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelOnePosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                self.labelOne.setValue(v);
-                self.valueOne = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderOnePosition(significantPercent);
-                self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
-                ui.helper.removeClass("dragging");
-            },
-            start: function (e, ui) {
-                ui.helper.removeClass("dragging").addClass("dragging");
-            }
-        });
-
         this.sliderTwo = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderTwo.element.draggable({
+        this._draggable(this.sliderOne, true);
-            axis: "x",
+        this._draggable(this.sliderTwo, false);
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelTwoPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                self.labelTwo.setValue(v);
-                self.valueTwo = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderTwoPosition(significantPercent);
-                self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
-            }
-        });
         this._setVisible(false);
 
         BI.createWidget({
@@ -179,6 +134,70 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
         })
     },
 
+    _rePosBySizeAfterMove: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        var v = this._getValueByPercent(significantPercent);
+        v = this._assertValue(v);
+        if(isLeft){
+            this._setLabelOnePosition(significantPercent);
+            this._setSliderOnePosition(significantPercent);
+            this.labelOne.setValue(v);
+            this.valueOne = v;
+        }else{
+            this._setLabelTwoPosition(significantPercent);
+            this._setSliderTwoPosition(significantPercent);
+            this.labelTwo.setValue(v);
+            this.valueTwo = v;
+        }
+        this._setBlueTrack();
+    },
+
+    _rePosBySizeAfterStop: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        isLeft ? this._setSliderOnePosition(significantPercent) : this._setSliderTwoPosition(significantPercent);
+    },
+
+    _draggable: function (widget, isLeft) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                self._rePosBySizeAfterMove(size, isLeft);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                self._rePosBySizeAfterStop(size, isLeft);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createLabelWrapper: function () {
         var c = this._constant;
         return {
@@ -371,13 +390,8 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
     },
 
     _setDraggableEnable: function (enable) {
-        if (enable) {
+        this.sliderOne.setEnable(enable);
-            this.sliderOne.element.draggable("enable");
+        this.sliderTwo.setEnable(enable);
-            this.sliderTwo.element.draggable("enable")
-        } else {
-            this.sliderOne.element.draggable("disable");
-            this.sliderTwo.element.draggable("disable")
-        }
     },
 
     _getPrecision: function () {
@@ -542,56 +556,12 @@ BI.IntervalSliderLabel = BI.inherit(BI.Widget, {
         this.sliderOne = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderOne.element.draggable({
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelOnePosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.labelOne.setValue(v);
-                self.labelOne.setText(v + o.unit);
-                self.valueOne = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderOnePosition(significantPercent);
-                self.fireEvent(BI.IntervalSliderLabel.EVENT_CHANGE);
-            }
-        });
 
         this.sliderTwo = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderTwo.element.draggable({
+        this._draggable(this.sliderOne, true);
-            axis: "x",
+        this._draggable(this.sliderTwo, false);
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelTwoPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.labelTwo.setValue(v);
-                self.labelTwo.setText(v + o.unit);
-                self.valueTwo = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderTwoPosition(significantPercent);
-                self.fireEvent(BI.IntervalSliderLabel.EVENT_CHANGE);
-            }
-        });
         this._setVisible(false);
 
         BI.createWidget({
@@ -621,6 +591,70 @@ BI.IntervalSliderLabel = BI.inherit(BI.Widget, {
         })
     },
 
+    _rePosBySizeAfterMove: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        var v = this._getValueByPercent(significantPercent);
+        v = this._assertValue(v);
+        if(isLeft){
+            this._setLabelOnePosition(significantPercent);
+            this._setSliderOnePosition(significantPercent);
+            this.labelOne.setValue(v);
+            this.valueOne = v;
+        }else{
+            this._setLabelTwoPosition(significantPercent);
+            this._setSliderTwoPosition(significantPercent);
+            this.labelTwo.setValue(v);
+            this.valueTwo = v;
+        }
+        this._setBlueTrack();
+    },
+
+    _rePosBySizeAfterStop: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        isLeft ? this._setSliderOnePosition(significantPercent) : this._setSliderTwoPosition(significantPercent);
+    },
+
+    _draggable: function (widget, isLeft) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                self._rePosBySizeAfterMove(size, isLeft);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                self._rePosBySizeAfterStop(size, isLeft);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.IntervalSliderLabel.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createLabelWrapper: function () {
         var c = this._constant;
         return {
@@ -807,13 +841,8 @@ BI.IntervalSliderLabel = BI.inherit(BI.Widget, {
     },
 
     _setDraggableEnable: function (enable) {
-        if (enable) {
+        this.sliderOne.setEnable(enable);
-            this.sliderOne.element.draggable("enable");
+        this.sliderTwo.setEnable(enable);
-            this.sliderTwo.element.draggable("enable")
-        } else {
-            this.sliderOne.element.draggable("disable");
-            this.sliderTwo.element.draggable("disable")
-        }
     },
 
     _getPrecision: function () {
@@ -1218,28 +1247,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
         this.slider = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.slider.element.draggable({
+        this._draggable(this.slider);
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
-                self._setLabelPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.label.setValue(v);
-                self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
-            }
-        });
         var sliderVertical = BI.createWidget({
             type: "bi.vertical",
             items: [{
@@ -1342,6 +1350,56 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
         })
     },
 
+    _draggable: function (widget) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                self._setBlueTrack(significantPercent);
+                self._setLabelPosition(significantPercent);
+                self._setSliderPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                v = o.digit === false ? v : v.toFixed(o.digit);
+                self.label.setValue(v);
+                self.value = v;
+                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderPosition(significantPercent);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createTrackWrapper: function () {
         return BI.createWidget({
             type: "bi.absolute",
@@ -1511,28 +1569,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, {
         this.slider = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.slider.element.draggable({
+        this._draggable(this.slider);
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
-                self._setLabelPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.label.setText(v + o.unit);
-                self.value = v;
-                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
-                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
-            }
-        });
         var sliderVertical = BI.createWidget({
             type: "bi.vertical",
             items: [{
@@ -1614,6 +1651,56 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, {
         })
     },
 
+    _draggable: function (widget) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                self._setBlueTrack(significantPercent);
+                self._setLabelPosition(significantPercent);
+                self._setSliderPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                v = o.digit === false ? v : v.toFixed(o.digit);
+                self.label.setValue(v);
+                self.value = v;
+                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderPosition(significantPercent);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createTrackWrapper: function () {
         return BI.createWidget({
             type: "bi.absolute",
@@ -1769,25 +1856,7 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
         this.slider = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.slider.element.draggable({
+        this._draggable(this.slider);
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                self.value = v;
-                self.fireEvent(BI.SingleSliderNormal.EVENT_DRAG, v);
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
-            }
-        });
 
         var sliderVertical = BI.createWidget({
             type: "bi.vertical",
@@ -1849,6 +1918,54 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
         }
     },
 
+    _draggable: function (widget) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                self._setBlueTrack(significantPercent);
+                self._setSliderPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                v = o.digit === false ? v : v.toFixed(o.digit);
+                self.value = v;
+                self.fireEvent(BI.SingleSliderNormal.EVENT_DRAG, v);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderPosition(significantPercent);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createTrack: function () {
         var self = this;
         var c = this._constant;

src/addons/sliders/js/intervalslider/intervalslider.js

@@ -100,56 +100,11 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
         this.sliderOne = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderOne.element.draggable({
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelOnePosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                self.labelOne.setValue(v);
-                self.valueOne = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderOnePosition(significantPercent);
-                self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
-                ui.helper.removeClass("dragging");
-            },
-            start: function (e, ui) {
-                ui.helper.removeClass("dragging").addClass("dragging");
-            }
-        });
-
         this.sliderTwo = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderTwo.element.draggable({
+        this._draggable(this.sliderOne, true);
-            axis: "x",
+        this._draggable(this.sliderTwo, false);
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelTwoPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                self.labelTwo.setValue(v);
-                self.valueTwo = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderTwoPosition(significantPercent);
-                self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
-            }
-        });
         this._setVisible(false);
 
         BI.createWidget({
@@ -179,6 +134,70 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
         })
     },
 
+    _rePosBySizeAfterMove: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        var v = this._getValueByPercent(significantPercent);
+        v = this._assertValue(v);
+        if(isLeft){
+            this._setLabelOnePosition(significantPercent);
+            this._setSliderOnePosition(significantPercent);
+            this.labelOne.setValue(v);
+            this.valueOne = v;
+        }else{
+            this._setLabelTwoPosition(significantPercent);
+            this._setSliderTwoPosition(significantPercent);
+            this.labelTwo.setValue(v);
+            this.valueTwo = v;
+        }
+        this._setBlueTrack();
+    },
+
+    _rePosBySizeAfterStop: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        isLeft ? this._setSliderOnePosition(significantPercent) : this._setSliderTwoPosition(significantPercent);
+    },
+
+    _draggable: function (widget, isLeft) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                self._rePosBySizeAfterMove(size, isLeft);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                self._rePosBySizeAfterStop(size, isLeft);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.IntervalSlider.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createLabelWrapper: function () {
         var c = this._constant;
         return {
@@ -371,13 +390,8 @@ BI.IntervalSlider = BI.inherit(BI.Widget, {
     },
 
     _setDraggableEnable: function (enable) {
-        if (enable) {
+        this.sliderOne.setEnable(enable);
-            this.sliderOne.element.draggable("enable");
+        this.sliderTwo.setEnable(enable);
-            this.sliderTwo.element.draggable("enable")
-        } else {
-            this.sliderOne.element.draggable("disable");
-            this.sliderTwo.element.draggable("disable")
-        }
     },
 
     _getPrecision: function () {

src/addons/sliders/js/intervalslider/intervalslider.label.js

@@ -58,56 +58,12 @@ BI.IntervalSliderLabel = BI.inherit(BI.Widget, {
         this.sliderOne = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderOne.element.draggable({
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelOnePosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.labelOne.setValue(v);
-                self.labelOne.setText(v + o.unit);
-                self.valueOne = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderOnePosition(significantPercent);
-                self.fireEvent(BI.IntervalSliderLabel.EVENT_CHANGE);
-            }
-        });
 
         this.sliderTwo = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.sliderTwo.element.draggable({
+        this._draggable(this.sliderOne, true);
-            axis: "x",
+        this._draggable(this.sliderTwo, false);
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setLabelTwoPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = self._assertValue(v);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.labelTwo.setValue(v);
-                self.labelTwo.setText(v + o.unit);
-                self.valueTwo = v;
-                self._setBlueTrack();
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderTwoPosition(significantPercent);
-                self.fireEvent(BI.IntervalSliderLabel.EVENT_CHANGE);
-            }
-        });
         this._setVisible(false);
 
         BI.createWidget({
@@ -137,6 +93,70 @@ BI.IntervalSliderLabel = BI.inherit(BI.Widget, {
         })
     },
 
+    _rePosBySizeAfterMove: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        var v = this._getValueByPercent(significantPercent);
+        v = this._assertValue(v);
+        if(isLeft){
+            this._setLabelOnePosition(significantPercent);
+            this._setSliderOnePosition(significantPercent);
+            this.labelOne.setValue(v);
+            this.valueOne = v;
+        }else{
+            this._setLabelTwoPosition(significantPercent);
+            this._setSliderTwoPosition(significantPercent);
+            this.labelTwo.setValue(v);
+            this.valueTwo = v;
+        }
+        this._setBlueTrack();
+    },
+
+    _rePosBySizeAfterStop: function (size, isLeft) {
+        var percent = size * 100 / (this._getGrayTrackLength());
+        var significantPercent = BI.parseFloat(percent.toFixed(1));
+        isLeft ? this._setSliderOnePosition(significantPercent) : this._setSliderTwoPosition(significantPercent);
+    },
+
+    _draggable: function (widget, isLeft) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                self._rePosBySizeAfterMove(size, isLeft);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                self._rePosBySizeAfterStop(size, isLeft);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.IntervalSliderLabel.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createLabelWrapper: function () {
         var c = this._constant;
         return {
@@ -323,13 +343,8 @@ BI.IntervalSliderLabel = BI.inherit(BI.Widget, {
     },
 
     _setDraggableEnable: function (enable) {
-        if (enable) {
+        this.sliderOne.setEnable(enable);
-            this.sliderOne.element.draggable("enable");
+        this.sliderTwo.setEnable(enable);
-            this.sliderTwo.element.draggable("enable")
-        } else {
-            this.sliderOne.element.draggable("disable");
-            this.sliderTwo.element.draggable("disable")
-        }
     },
 
     _getPrecision: function () {

src/addons/sliders/js/singleslider/singleslider.js

@@ -39,28 +39,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
         this.slider = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.slider.element.draggable({
+        this._draggable(this.slider);
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
-                self._setLabelPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.label.setValue(v);
-                self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
-            }
-        });
         var sliderVertical = BI.createWidget({
             type: "bi.vertical",
             items: [{
@@ -163,6 +142,56 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
         })
     },
 
+    _draggable: function (widget) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                self._setBlueTrack(significantPercent);
+                self._setLabelPosition(significantPercent);
+                self._setSliderPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                v = o.digit === false ? v : v.toFixed(o.digit);
+                self.label.setValue(v);
+                self.value = v;
+                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderPosition(significantPercent);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createTrackWrapper: function () {
         return BI.createWidget({
             type: "bi.absolute",

src/addons/sliders/js/singleslider/singleslider.label.js

@@ -41,28 +41,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, {
         this.slider = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.slider.element.draggable({
+        this._draggable(this.slider);
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
-                self._setLabelPosition(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                v = o.digit === false ? v : v.toFixed(o.digit);
-                self.label.setText(v + o.unit);
-                self.value = v;
-                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
-                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
-            }
-        });
         var sliderVertical = BI.createWidget({
             type: "bi.vertical",
             items: [{
@@ -144,6 +123,56 @@ BI.SingleSliderLabel = BI.inherit(BI.Widget, {
         })
     },
 
+    _draggable: function (widget) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                self._setBlueTrack(significantPercent);
+                self._setLabelPosition(significantPercent);
+                self._setSliderPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                v = o.digit === false ? v : v.toFixed(o.digit);
+                self.label.setValue(v);
+                self.value = v;
+                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderPosition(significantPercent);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createTrackWrapper: function () {
         return BI.createWidget({
             type: "bi.absolute",

src/addons/sliders/js/singleslider/singleslider.normal.js

@@ -28,25 +28,7 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
         this.slider = BI.createWidget({
             type: "bi.single_slider_button"
         });
-        this.slider.element.draggable({
+        this._draggable(this.slider);
-            axis: "x",
-            containment: this.grayTrack.element,
-            scroll: false,
-            drag: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
-                self._setBlueTrack(significantPercent);
-                var v = self._getValueByPercent(significantPercent);
-                self.value = v;
-                self.fireEvent(BI.SingleSliderNormal.EVENT_DRAG, v);
-            },
-            stop: function (e, ui) {
-                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
-                var significantPercent = BI.parseFloat(percent.toFixed(1));
-                self._setSliderPosition(significantPercent);
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
-            }
-        });
 
         var sliderVertical = BI.createWidget({
             type: "bi.vertical",
@@ -108,6 +90,54 @@ BI.SingleSliderNormal = BI.inherit(BI.Widget, {
         }
     },
 
+    _draggable: function (widget) {
+        var self = this, o = this.options;
+        var startDrag = false;
+        var size = 0, offset = 0, defaultSize = 0;
+        var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX) {
+            if (mouseMoveTracker.isDragging()) {
+                startDrag = true;
+                offset += deltaX;
+                size = optimizeSize(defaultSize + offset);
+                widget.element.addClass("dragging");
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                self._setBlueTrack(significantPercent);
+                self._setSliderPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                v = o.digit === false ? v : v.toFixed(o.digit);
+                self.value = v;
+                self.fireEvent(BI.SingleSliderNormal.EVENT_DRAG, v);
+            }
+        }, function () {
+            if (startDrag === true) {
+                size = optimizeSize(size);
+                var percent = size * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderPosition(significantPercent);
+                size = 0;
+                offset = 0;
+                defaultSize = size;
+                startDrag = false;
+            }
+            widget.element.removeClass("dragging");
+            mouseMoveTracker.releaseMouseMoves();
+            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
+        }, document);
+        widget.element.on("mousedown", function (event) {
+            if(!widget.isEnabled()){
+                return;
+            }
+            defaultSize = this.offsetLeft;
+            optimizeSize(defaultSize);
+            mouseMoveTracker.captureMouseMoves(event);
+        });
+
+        function optimizeSize(s) {
+            return BI.clamp(s, 0, o.width);
+        }
+    },
+
     _createTrack: function () {
         var self = this;
         var c = this._constant;