New option dnd.focusOnClick

Author: mar10

CHANGELOG.md

@@ -1,8 +1,11 @@
 # 2.2.0 / Unreleased
   * [Improved] #245 tree.generateInput() now returns data using PHPs array
     convention, i.e. by appending brackets to the name: 'ft_1[]'.
-  * [Fixed] #250: Children lazy empty nodes remain checked when parent is unchecked with hierarchical multi-selection
-
+  * [Fixed] #250: Children lazy empty nodes remain checked when parent is 
+    unchecked with hierarchical multi-selection
+  * [Added] Option dnd.focusOnClick sets focus to tree widget, even when dragging 
+    is enabled
+  * [Added] node.info()
 
 # 2.1.0 / 2014-05-29
   * [Added] #210: [ext-persist] optionally store information in sessionStorage or localStorage

demo/sample-ext-dnd.html

@@ -42,13 +42,15 @@
 		// and pass the tree options as an argument to the fancytree() function:
 		$("#tree").fancytree({
 			extensions: ["dnd"],
+			// titlesTabbable: true,
 			source: {
 				url: "ajax-tree-fs.json"
 			},
 			dnd: {
+				autoExpandMS: 400,
+				focusOnClick: true,
 				preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
 				preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
-				autoExpandMS: 400,
 				dragStart: function(node, data) {
 					/** This function MUST be defined to enable dragging for the tree.
 					 *  Return false to cancel dragging of node.

src/jquery.fancytree.dnd.js

@@ -204,6 +204,7 @@ $.ui.fancytree.registerExtension({
 		autoExpandMS: 1000, // Expand nodes after n milliseconds of hovering.
 		preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
 		preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
+		focusOnClick: false, // Focus, although draggable cancels mousedown event (#270)
 		dragEnter: null,  // Callback(targetNode, data)
 		dragOver: null,   // Callback(targetNode, data)
 		dragDrop: null,   // Callback(targetNode, data)
@@ -216,6 +217,20 @@ $.ui.fancytree.registerExtension({
 	treeInit: function(ctx){
 		var tree = ctx.tree;
 		this._super(ctx);
+		// issue #270: draggable eats mousedown events
+		if( tree.options.dnd.dragStart ){
+			tree.$container.on("mousedown", function(event){
+				if( !tree.hasFocus() && ctx.options.dnd.focusOnClick ) {
+					var node = $.ui.fancytree.getNode(event);
+					node.debug("Re-enable focus that was prevented by jQuery UI draggable.");
+					// node.setFocus();
+					// $(node.span).closest(":tabbable").focus();
+					// $(event.target).trigger("focus");
+					// $(event.target).closest(":tabbable").trigger("focus");
+					$(event.target).closest(":tabbable").focus();
+				}
+			});
+		}
 		_initDragAndDrop(tree);
 	},
 	/* Override key handler in order to cancel dnd on escape.*/
@@ -226,6 +241,12 @@ $.ui.fancytree.registerExtension({
 		}
 		return this._super(ctx);
 	},
+	nodeClick: function(ctx) {
+		// if( ctx.options.dnd.dragStart ){
+		// 	ctx.tree.$container.focus();
+		// }
+		return this._super(ctx);
+	},
 	/* Display drop marker according to hitMode ('after', 'before', 'over', 'out', 'start', 'stop'). */
 	_setDndStatus: function(sourceNode, targetNode, helper, hitMode, accept) {
 		var posOpts,