Add onMouseDrag method to the DragdropHandler

lib/ace/mouse/default_handlers.js

@@ -98,7 +98,7 @@ function DefaultHandlers(mouseHandler) {
         return ev.preventDefault();
     };
 
-    this.startSelect = function(pos, fromEvent) {
+    this.startSelect = function(pos) {
         pos = pos || this.editor.renderer.screenToTextCoordinates(this.x, this.y);
         var editor = this.editor;
         if (this.mousedownEvent.getShiftKey()) {
@@ -109,21 +109,7 @@ function DefaultHandlers(mouseHandler) {
             editor.selection.clearSelection();
         }
         if (editor.container.setCapture) {
-            if (fromEvent) {
+            editor.container.setCapture();
-                editor.container.setCapture();
-            } else {
-                var self = this;
-                var onMouseMove = function() {
-                    event.removeListener(editor.container, 'mousemove', onMouseMove);
-                    editor.container.setCapture();
-                };
-                var onMouseUp = function() {
-                    event.removeListener(editor.container, 'mouseup', onMouseUp);
-                    event.removeListener(editor.container, 'mousemove', onMouseMove);
-                };
-                event.addListener(editor.container, 'mousemove', onMouseMove);
-                event.addListener(editor.container, 'mouseup', onMouseUp);
-            }
         }
         editor.setStyle("ace_selecting");
         this.setState("select");

lib/ace/mouse/dragdrop_handler.js

@@ -49,7 +49,7 @@ function DragdropHandler(mouseHandler) {
         editor.container.appendChild(proxy);
     }
 
-    var exports = ["dragWait", "dragWaitEnd", "startDrag", "dragReadyEnd"];
+    var exports = ["dragWait", "dragWaitEnd", "startDrag", "dragReadyEnd", "onMouseDrag"];
 
      exports.forEach(function(x) {
          mouseHandler[x] = this[x];
@@ -278,52 +278,56 @@ function DragdropHandler(mouseHandler) {
 (function() {
 
     this.dragWait = function() {
-        var editor = this.editor;
-        var distance = calcDistance(this.mousedownEvent.x, this.mousedownEvent.y, this.x, this.y);
         var interval = (new Date()).getTime() - this.mousedownEvent.time;
-
+        if (interval > this.editor.getDragDelay())
-        if (distance > 0)
-            this.startSelect(this.mousedownEvent.getDocumentPosition());
-        else if (interval > editor.getDragDelay())
             this.startDrag();
     };
 
     this.dragWaitEnd = function() {
-        this.startSelect(this.mousedownEvent.getDocumentPosition(), true);
+        this.startSelect(this.mousedownEvent.getDocumentPosition());
         this.selectEnd();
     };
 
-    this.startDrag = function(){
-        var target = this.editor.container;
-        this.setState("dragReady");
-        this.editor.renderer.$cursorLayer.setBlinking(false);
-        target.draggable = true;
-        this.editor.setStyle("ace_dragging");
-        if (useragent.isIE) {
-            // IE does not handle [draggable] attribute set after mousedown
-            event.addListener(target, "mousemove", forceDragIE);
-        }
-    };
-
     this.dragReadyEnd = function(e) {
         var target = this.editor.container;
         target.draggable = false;
-        this.editor.unsetStyle("ace_dragging");
-        if (useragent.isIE) {
-            event.removeListener(target, "mousemove", forceDragIE);
-        }
         this.editor.renderer.$cursorLayer.setBlinking(!this.editor.getReadOnly());
-        this.startSelect(this.mousedownEvent.getDocumentPosition(), true);
+        this.editor.unsetStyle("ace_dragging");
-        this.selectEnd();
+        this.dragWaitEnd();
+    };
+
+    this.startDrag = function(){
+        var target = this.editor.container;
+        target.draggable = true;
+        this.editor.renderer.$cursorLayer.setBlinking(false);
+        this.editor.setStyle("ace_dragging");
+        this.setState("dragReady");
+    };
+
+    this.onMouseDrag = function(e) {
+        if (useragent.isOpera)
+            document.getSelection().removeAllRanges();
+        if (useragent.isIE && this.state == "dragReady") {
+            // IE does not handle [draggable] attribute set after mousedown
+            var target = this.editor.container;
+            var distance = calcDistance(this.mousedownEvent.x, this.mousedownEvent.y, this.x, this.y);
+            if (distance > 3)
+                target.dragDrop();
+        }
+        if (this.state === "dragWait") {
+            var distance = calcDistance(this.mousedownEvent.x, this.mousedownEvent.y, this.x, this.y);
+            if (distance > 0)
+                this.startSelect(this.mousedownEvent.getDocumentPosition());
+        }
     };
 
     this.onMouseDown = function(e) {
         if (!this.$dragEnabled)
             return;
-        var inSelection = e.inSelection();
-        var editor = this.editor;
         this.mousedownEvent = e;
+        var editor = this.editor;
 
+        var inSelection = e.inSelection();
         var button = e.getButton();
         if (button === 0 && inSelection) {
             this.mousedownEvent.time = (new Date()).getTime();
@@ -339,29 +343,16 @@ function DragdropHandler(mouseHandler) {
                         mouseTarget.draggable = false;
                     }, 8);
                 }
-                this.captureMouse(e, "dragWait");
+                this.setState("dragWait");
             } else {
                 this.startDrag();
-                this.captureMouse(e);
-            }
-
-            if (useragent.isOpera) {
-                var cancelSelection = function(e){
-                    document.getSelection().removeAllRanges();
-                    editor.container.removeEventListener("mousemove", cancelSelection);
-                };
-                editor.container.addEventListener("mousemove", cancelSelection);
             }
+            this.captureMouse(e, this.onMouseDrag.bind(this));
             // TODO: a better way to prevent default handler without preventing browser default action
             e.defaultPrevented = true;
         }
     };
 
-    function forceDragIE() {
-        event.removeListener(this, "mousemove", forceDragIE);
-        this.dragDrop();
-    }
-
     function calcDistance(ax, ay, bx, by) {
         return Math.sqrt(Math.pow(bx - ax, 2) + Math.pow(by - ay, 2));
     }

lib/ace/mouse/mouse_handler.js

@@ -99,10 +99,7 @@ var MouseHandler = function(editor) {
         this.state = state;
     };
 
-    this.captureMouse = function(ev, state) {
+    this.captureMouse = function(ev, mouseMoveHandler) {
-        if (state)
-            this.setState(state);
-
         this.x = ev.x;
         this.y = ev.y;
 
@@ -117,6 +114,7 @@ var MouseHandler = function(editor) {
         var onMouseMove = function(e) {
             self.x = e.clientX;
             self.y = e.clientY;
+            mouseMoveHandler && mouseMoveHandler(e);
         };
 
         var onCaptureEnd = function(e) {