Merge pull request #746 from ckeditor/t/711

Allow to drag widget only with left mouse button

CHANGES.md

@@ -17,6 +17,7 @@ Fixed Issues:
 * [#591](https://github.com/ckeditor/ckeditor-dev/issues/591): Fixed: Column is inserted in a wrong order inside table if any cell has a vertical split.
 * [#787](https://github.com/ckeditor/ckeditor-dev/issues/787): Fixed: Using cut inside nested table does not cut selected content.
 * [#842](https://github.com/ckeditor/ckeditor-dev/issues/842): Fixed: List style not restored when toggling list indent level in [Indent List](http://ckeditor.com/addon/indentlist) plugin.
+* [#711](https://github.com/ckeditor/ckeditor-dev/issues/711): Fixed: Dragging widgets should only work with left mouse button.
 
 Other Changes:
 

plugins/widget/plugin.js

@@ -2394,6 +2394,7 @@
 				// and widget need to be focused on drag start (http://dev.ckeditor.com/ticket/12172#comment:10).
 				widget.focus();
 			}
+
 		} );
 
 		editor.on( 'drop', function( evt ) {
@@ -3226,6 +3227,11 @@
 	}
 
 	function onBlockWidgetDrag( evt ) {
+		// Allow to drag widget only with left mouse button (#711).
+		if ( CKEDITOR.tools.getMouseButton( evt ) !== CKEDITOR.MOUSE_BUTTON_LEFT ) {
+			return;
+		}
+
 		var finder = this.repository.finder,
 			locator = this.repository.locator,
 			liner = this.repository.liner,
@@ -3267,6 +3273,7 @@
 		// Fire drag start as it happens during the native D&D.
 		editor.fire( 'dragstart', { target: evt.sender } );
 
+
 		function onMouseUp() {
 			var l;
 

tests/plugins/widget/dnd.js

@@ -459,7 +459,8 @@
 				pasteCounter = sinon.spy(),
 				dragstartCounter = sinon.spy(),
 				dragendCounter = sinon.spy(),
-				dropCounter = sinon.spy();
+				dropCounter = sinon.spy(),
+				isIe8 = CKEDITOR.env.ie && CKEDITOR.env.version < 9;
 
 			editor.on( 'paste', pasteCounter );
 			editor.on( 'dragstart', dragstartCounter );
@@ -486,7 +487,11 @@
 					// Testing if widget is selected is meaningful only if it is not selected at the beginning. (http://dev.ckeditor.com/ticket/13129)
 					assert.isNull( editor.widgets.focused, 'widget not focused before mousedown' );
 
-					img.fire( 'mousedown' );
+					img.fire( 'mousedown', {
+						$: {
+							button: isIe8 ? 1 : 0
+						}
+					} );
 
 					// Create dummy line and pretend it's visible to cheat drop listener
 					// making if feel that there's a place for the widget to be dropped.
@@ -606,6 +611,48 @@
 
 				assertRelations( editor, finder, '|<div data-widget="testwidget4" id="w4"><div class="n1"><p>x</p></div></div>|' );
 			} );
+		},
+
+		// #711
+		'test if only left mouse button triggers dragstart': function() {
+			var editor = this.editor,
+				bot = this.editorBot,
+				isIe8 = CKEDITOR.env.ie && CKEDITOR.env.version < 9;
+
+			function testButton( button, isOn, callback ) {
+				bot.setData( '<p id="a">foo</p><div data-widget="testwidget" id="w1">bar</div>', function() {
+					var widget = getWidgetById( editor, 'w1' ),
+						img = widget.dragHandlerContainer.findOne( 'img' );
+
+					editor.focus();
+					img.fire( 'mousedown', {
+						$: {
+							button: button
+						}
+					} );
+
+					setTimeout( function() {
+						resume( function() {
+							assert[ isOn ? 'isTrue' : 'isFalse' ]( editor.editable().hasClass( 'cke_widget_dragging' ) );
+
+							if ( callback ) {
+								callback();
+							}
+						} );
+					}, 0 );
+
+					wait();
+				} );
+			}
+
+			// Left mouse button – should activate dragging.
+			testButton( isIe8 ? 1 : 0, true, function() {
+				// Middle mouse button – shouldn't activate dragging.
+				testButton( isIe8 ? 4 : 1, false, function() {
+					// Right mouse button - shouldn't activate dragging.
+					testButton( 2, false );
+				} );
+			} );
 		}
 	} );
 } )();

tests/plugins/widget/manual/dragwidget.html

@@ -0,0 +1,14 @@
+<div id="editor">
+	<figure class="image">
+		<img alt="Lena" width="100" height="100" src="../../../_assets/lena.jpg" />
+		<figcaption>Caption</figcaption>
+	</figure>
+    <p>Hello world!</p>
+    <p>Some more text</p>
+</div>
+
+<script>
+	CKEDITOR.replace( 'editor', {
+		height: 300
+	} );
+</script>

tests/plugins/widget/manual/dragwidget.md

@@ -0,0 +1,9 @@
+@bender-tags: widget, bug, 4.8.0, 711
+@bender-ui: collapsed
+@bender-ckeditor-plugins: widget, wysiwygarea, toolbar, sourcearea, image2, contextmenu
+
+**Scenario:**
+
+1. Use the left mouse button to drag and drop image inside the editor. ***Expected result:*** Image has been dragged and dropped.
+2. Mouse over the image and click right mouse button. ***Expected result:*** Context menu has been opened.
+3. Mouse over the image and try to drag and drop by using right mouse button. ***Expected result:*** It's not possible to drag an image.

tests/plugins/widget/undo.js

@@ -362,7 +362,8 @@
 		},
 
 		'test d&d block widget': function() {
-			var editor = this.editor;
+			var editor = this.editor,
+				isIe8 = CKEDITOR.env.ie && CKEDITOR.env.version < 9;
 
 			// Override Finder's getRange to force a place for the
 			// widget to be dropped.
@@ -403,7 +404,11 @@
 				wait( function() {
 					try {
 						// Simulate widget drag.
-						img.fire( 'mousedown' );
+						img.fire( 'mousedown', {
+							$: {
+								button: isIe8 ? 1 : 0
+							}
+						} );
 
 						// Create dummy line and pretend it's visible to cheat drop listener
 						// making if feel that there's a place for the widget to be dropped.
@@ -445,4 +450,4 @@
 			} );
 		}
 	} );
-} )();
+} )();