Ticket #6445: dndBetween.patch

tests/tree/test_Tree_DnD.html

@@ -168 +168 @@
         <tr>
                 <td>
                         <h2>Collection Count Summary</h2>
-                        <p>You can't drop items onto this tree.</p>
+                        <p>
+                                You can't drop items onto this tree, but you can reorder categories. The between threshold
+                                is set to 5, so if you are near the top or bottom of a node the drop will be above or below it.
+                        </p>
                         <div dojoType="dijit.tree.TreeStoreModel" jsId="catModel"
                                 store="catStore" query="{id: '0'}"></div>
                         <div class="container" dojoType="dijit.Tree" id="collectionsTree" model="catModel"
-                                getLabel="catTreeCustomLabel"  dndController="dijit._tree.dndSource"
+                                getLabel="catTreeCustomLabel"  dndController="dijit._tree.dndSource" betweenThreshold="5"
                                 checkAcceptance="dndAccept" getIconClass="getIcon"></div>
                 </td>
                 <td>

_tree/dndSource.js

@@ -12 +12 @@
         skipForm: false,
         dragThreshold: 0,
         accept: ["text"],
+        betweenThreshold: 0,
         
         constructor: function(tree, params){
                 // summary: a constructor of the Source
@@ -22 +23 @@
                 //      horizontal: Boolean: a horizontal container, if true, vertical otherwise or when omitted
                 //      copyOnly: Boolean: always copy items, if true, use a state of Ctrl key otherwise
                 //      skipForm: Boolean: don't start the drag operation, if clicked on form elements
+                //  betweenThreshold: Integer: distance from upper/lower edge of node to allow drop to reorder nodes
                 //      the rest of parameters are passed to the selector
                 if(!params){ params = {}; }
                 dojo.mixin(this, params);
@@ -40 +42 @@
                 this.mouseDown = false;
                 this.targetAnchor = null;
                 this.targetBox = null;
-                this.before = true;
+                this.dropPosition = "Over";
                 this._lastX = 0;
                 this._lastY = 0;
 
@@ -102 +104 @@
                 this.inherited("onMouseMove", arguments);
                 var m = dojo.dnd.manager();
                 if(this.isDragging){
-                        // calculate before/after
-
-                        if (this.allowBetween){ // not implemented yet for tree since it has no concept of order
-                                var before = false;
+                        if(this.betweenThreshold > 0){
+                                // calculate before/after/over
+                                var dropPosition = "Over";
                                 if(this.current){
                                         if(!this.targetBox || this.targetAnchor != this.current){
                                                 this.targetBox = {
@@ -115 +116 @@
                                                 };
                                         }
                                         if(this.horizontal){
-                                                before = (e.pageX - this.targetBox.xy.x) < (this.targetBox.w / 2);
+                                                if((e.pageX - this.targetBox.xy.x) <= this.betweenThreshold){
+                                                        dropPosition = "Before";
+                                                }else if((e.pageX - this.targetBox.xy.x) >= (this.targetBox.w - this.betweenThreshold)){
+                                                        dropPosition = "After";
+                                                }
                                         }else{
-                                                before = (e.pageY - this.targetBox.xy.y) < (this.targetBox.h / 2);
+                                                if((e.pageY - this.targetBox.xy.y) <= this.betweenThreshold){
+                                                        dropPosition = "Before";
+                                                }else if((e.pageY - this.targetBox.xy.y) >= (this.targetBox.h - this.betweenThreshold)){
+                                                        dropPosition = "After";
+                                                }
                                         }
                                 }
-                                if(this.current != this.targetAnchor || before != this.before){
-                                        this._markTargetAnchor(before);
-                                        m.canDrop(!this.current || m.source != this || !(this.current.id in this.selection));
+                                if(this.current != this.targetAnchor || dropPosition != this.dropPosition){
+                                        this._markTargetAnchor(dropPosition);
+                                        var n = this._getChildByEvent(e);       // the TreeNode
+                                        if(n && this.checkItemAcceptance(n,m.source)){
+                                                m.canDrop(!this.current || m.source != this || !(this.current.id in this.selection));
+                                        }
                                 }
                         }
                 }else{
@@ -264 +276 @@
                         this.isDragging = false;
 
                         // Compute the new parent item
-                        var targetWidget = dijit.getEnclosingWidget(target),
+                        var targetWidget = dijit.getEnclosingWidget(target);
+                        var newParentItem;
+                        var insertIndex;
+                        newParentItem = (targetWidget && targetWidget.item) || tree.item;
+                        if(this.dropPosition == "Before" || this.dropPosition == "After"){
+                                newParentItem = (targetWidget.getParent() && targetWidget.getParent().item) || tree.item;
+                                // Compute the insert index for reordering
+                                insertIndex = targetWidget.getIndexInParent();
+                                if(this.dropPosition == "After"){
+                                        insertIndex = targetWidget.getIndexInParent() + 1;
+                                }
+                        }else{
                                 newParentItem = (targetWidget && targetWidget.item) || tree.item;
+                        }
 
                         // If we are dragging from another source (or at least, another source
                         // that points to a different data store), then we need to make new data
@@ -286 +310 @@
                                                 childItem = childTreeNode.item,
                                                 oldParentItem = childTreeNode.getParent().item;
 
-                                        model.pasteItem(childItem, oldParentItem, newParentItem, copy);
+                                        if(typeof insertIndex == "number"){
+                                                if(newParentItem == oldParentItem && childTreeNode.getIndexInParent() < insertIndex){
+                                                        insertIndex -= 1;
+                                                }
+                                        }
+                                        model.pasteItem(childItem, oldParentItem, newParentItem, copy, insertIndex);
                                 }else{
                                         model.newItem(newItemsParams[idx], newParentItem);
                                 }
@@ -304 +333 @@
                         this._unmarkTargetAnchor();
                         this.targetAnchor = null;
                 }
-                this.before = true;
+                this.dropPosition = "Over";
                 this.isDragging = false;
                 this.mouseDown = false;
                 delete this.mouseButton;
@@ -324 +353 @@
                 this.inherited("onOutEvent",arguments); 
                 dojo.dnd.manager().outSource(this);
         },
-        _markTargetAnchor: function(before){
-                // summary: assigns a class to the current target anchor based on "before" status
-                // before: Boolean: insert before, if true, after otherwise
-                if(this.current == this.targetAnchor && this.before == before){ return; }
+        _markTargetAnchor: function(dropPosition){
+                // summary: assigns a class to the current target anchor based on "dropPosition" status
+                // dropPosition: String: the class to assign based on the drop target action
+                if(this.current == this.targetAnchor && this.dropPosition == dropPosition){ return; }
                 if(this.targetAnchor){
-                        this._removeItemClass(this.targetAnchor, this.before ? "Before" : "After");
+                        this._removeItemClass(this.targetAnchor, this.dropPosition);
                 }
                 this.targetAnchor = this.current;
                 this.targetBox = null;
-                this.before = before;
+                this.dropPosition = dropPosition;
                 if(this.targetAnchor){
-                        this._addItemClass(this.targetAnchor, this.before ? "Before" : "After");
+                        this._addItemClass(this.targetAnchor, this.dropPosition);
                 }
         },
         _unmarkTargetAnchor: function(){
-                // summary: removes a class of the current target anchor based on "before" status
+                // summary: removes a class of the current target anchor based on "dropPosition" status
                 if(!this.targetAnchor){ return; }
-                this._removeItemClass(this.targetAnchor, this.before ? "Before" : "After");
+                this._removeItemClass(this.targetAnchor, this.dropPosition);
                 this.targetAnchor = null;
                 this.targetBox = null;
-                this.before = true;
+                this.dropPosition = "Over";
         },
         _markDndStatus: function(copy){
                 // summary: changes source's state based on "copy" status

Tree.js

@@ -331 +331 @@
         dndController: null,
 
         //parameters to pull off of the tree and pass on to the dndController as its params
-        dndParams: ["onDndDrop","itemCreator","onDndCancel","checkAcceptance", "checkItemAcceptance", "dragThreshold"],
+        dndParams: ["onDndDrop","itemCreator","onDndCancel","checkAcceptance", "checkItemAcceptance", "dragThreshold", "betweenThreshold"],
 
         //declare the above items so they can be pulled from the tree's markup
         onDndDrop:null,
@@ -340 +340 @@
         checkAcceptance:null,   
         checkItemAcceptance:null,
         dragThreshold:0,
+        betweenThreshold:0,
 
         _publish: function(/*String*/ topicName, /*Object*/ message){
                 // summary:
@@ -1090 +1091 @@
                 return this.store.newItem(args, pInfo);
         },
 
-        pasteItem: function(/*Item*/ childItem, /*Item*/ oldParentItem, /*Item*/ newParentItem, /*Boolean*/ bCopy){
+        pasteItem: function(/*Item*/ childItem, /*Item*/ oldParentItem, /*Item*/ newParentItem, /*Boolean*/ bCopy, /*int?*/ insertIndex){
                 // summary:
                 //              Move or copy an item from one parent item to another.
                 //              Used in drag & drop
@@ -1114 +1115 @@
 
                 // modify target item's children attribute to include this item
                 if(newParentItem){
-                        store.setValues(newParentItem, parentAttr,
-                                store.getValues(newParentItem, parentAttr).concat(childItem));
+                        if(typeof insertIndex == "number"){
+                                var childItems = store.getValues(newParentItem, parentAttr);
+                                childItems.splice(insertIndex, 0, childItem);
+                                store.setValues(newParentItem, parentAttr, childItems);
+                        }else{
+                                store.setValues(newParentItem, parentAttr,
+                                                store.getValues(newParentItem, parentAttr).concat(childItem));
+                        }
                 }
         },
 
@@ -1290 +1297 @@
                 //              added to the root of the tree, for example to add a flag like root=true
         },
 
-        pasteItem: function(/*Item*/ childItem, /*Item*/ oldParentItem, /*Item*/ newParentItem, /*Boolean*/ bCopy){
+        pasteItem: function(/*Item*/ childItem, /*Item*/ oldParentItem, /*Item*/ newParentItem, /*Boolean*/ bCopy, /*int?*/ insertIndex){
                 // summary:
                 //              Move or copy an item from one parent item to another.
                 //              Used in drag & drop
@@ -1304 +1311 @@
                 }
                 dijit.tree.TreeStoreModel.prototype.pasteItem.call(this, childItem,
                         oldParentItem === this.root ? null : oldParentItem,
-                        newParentItem === this.root ? null : newParentItem
+                        newParentItem === this.root ? null : newParentItem,
+                        insertIndex
                 );
                 if(newParentItem === this.root){
                         // It's onAddToRoot()'s responsibility to modify the item so it matches