feat(IText): Draggable text

src/canvas.class.js

@@ -980,6 +980,7 @@
 
       this._copyCanvasStyle(lowerCanvasEl, upperCanvasEl);
       this._applyCanvasStyle(upperCanvasEl);
+      upperCanvasEl.setAttribute('draggable', 'true');
       this.contextTop = upperCanvasEl.getContext('2d');
     },
 

src/mixins/canvas_events.mixin.js

@@ -50,6 +50,7 @@
       functor(canvasElement, 'wheel', this._onMouseWheel);
       functor(canvasElement, 'contextmenu', this._onContextMenu);
       functor(canvasElement, 'dblclick', this._onDoubleClick);
+      functor(canvasElement, 'dragstart', this._onDragStart);
       functor(canvasElement, 'dragover', this._onDragOver);
       functor(canvasElement, 'dragenter', this._onDragEnter);
       functor(canvasElement, 'dragleave', this._onDragLeave);
@@ -103,6 +104,7 @@
       this._onMouseEnter = this._onMouseEnter.bind(this);
       this._onContextMenu = this._onContextMenu.bind(this);
       this._onDoubleClick = this._onDoubleClick.bind(this);
+      this._onDragStart = this._onDragStart.bind(this);
       this._onDragOver = this._onDragOver.bind(this);
       this._onDragEnter = this._simpleEventHandler.bind(this, 'dragenter');
       this._onDragLeave = this._simpleEventHandler.bind(this, 'dragleave');
@@ -207,6 +209,20 @@
       this.__onLongPress && this.__onLongPress(e, self);
     },
 
+    /**
+     * supports native like text dragging
+     * @private
+     * @param {DragEvent} e 
+     */
+    _onDragStart: function (e) {
+      var activeObject = this.getActiveObject();
+      if (activeObject && typeof activeObject.onDragStart === 'function' && activeObject.onDragStart(e)) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+    },
+
     /**
      * prevent default to allow drop event to be fired
      * @private
@@ -374,7 +390,9 @@
      * @param {Event} e Event object fired on mousemove
      */
     _onMouseMove: function (e) {
-      !this.allowTouchScrolling && e.preventDefault && e.preventDefault();
+      var activeObject = this.getActiveObject();
+      !this.allowTouchScrolling && (!activeObject || !activeObject.__isDragging)
+        && e.preventDefault && e.preventDefault();
       this.__onMouseMove(e);
     },
 

src/mixins/itext_click_behavior.mixin.js

@@ -97,7 +97,7 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
    * current compositionMode. It will be set to false.
    */
   _mouseDownHandler: function(options) {
-    if (!this.canvas || !this.editable || (options.e.button && options.e.button !== 1)) {
+    if (!this.canvas || !this.editable || this.__isDragging || (options.e.button && options.e.button !== 1)) {
       return;
     }
 
@@ -129,6 +129,9 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
     // we want to avoid that an object that was selected and then becomes unselectable,
     // may trigger editing mode in some way.
     this.selected = this === this.canvas._activeObject;
+    // text dragging logic
+    var newSelection = this.getSelectionStartFromPointer(options.e);
+    this.__isDragging = newSelection > this.selectionStart && newSelection < this.selectionEnd;
   },
 
   /**
@@ -146,12 +149,38 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
     this.on('mouseup', this.mouseUpHandler);
   },
 
+  /**
+   * support native like text dragging
+   * @private
+   * @param {DragEvent} e 
+   * @returns {boolean} should handle event
+   */
+  onDragStart: function (e) {
+    this.__dragStartFired = true;
+    if (this.__isDragging) {
+      var selectedText = this.text.slice(this.selectionStart, this.selectionEnd);
+      e.dataTransfer.setData('text/plain', selectedText);
+      //e.dataTransfer.setDragImage(this._cacheCanvas, 0,0);
+      this.fire('dragstart', { e: e, selectedText: selectedText });
+    }
+    return this.__isDragging;
+  },
+
   /**
    * standard handler for mouse up, overridable
    * @private
    */
-  mouseUpHandler: function(options) {
+  mouseUpHandler: function (options) {
+    // restore selection state after dragging
+    if (this.__isDragging && !this.__dragStartFired) {
+      // drag didn't occur, so we revert to click behavior
+      this.__isDragging = false;
+      this._mouseDownHandler(options);
+    }
+    this.__isDragging = this.__dragStartFired = false;
+
     this.__isMousedown = false;
+
     if (!this.editable || this.group ||
       (options.transform && options.transform.actionPerformed) ||
       (options.e.button && options.e.button !== 1)) {

src/shapes/itext.class.js

@@ -10,6 +10,7 @@
    * @fires selection:changed
    * @fires editing:entered
    * @fires editing:exited
+   * @fires dragstart
    *
    * @return {fabric.IText} thisArg
    * @see {@link fabric.IText#initialize} for constructor definition