Start Building Professional
Web Apps Today

dhtmlxTree setDragHandler

I've set up setDragHandler(tondrag) - function tondrag(id,newparent, idbefore)

I can drag-n-drop at the same level to a different parent (newwparent) but only if it has a child :-
1) If it has a child then parameter newparent= the new parent id.
2) but if there is no child then parameter newparent is the "parent id" of newparent!

I therefore do not know where to insert the moved node - I need to know the real parent id as I am also doing the same on a server ie reflecting the tree on the server - directory tree. How can I obtain the true parent id?

Also idbefore (see above) is in fact the id after the insert point and not as comment says in source: @eventparam: if node droped as sibling then contain id of item before whitch source node will be inserted.

1) same parent - mv P1-2 above P1-1
P1
-1
-2
can become
P1
-2
-1

2) different parent with child - move P2-2 below P1-2
P1
-1
P2
-2
-3
can become
P1
-1
-2
P2
-3

3) different parent no child - move P2-1 to P1 fails as the parent parameter contains R1 and not P1
R1
-P1
-P2
--1
--2

I think I can solve this uising
if new parent parameter = parent of target parent
var nextindex= getIndexById(idbefore);
var realparent= getItemIdByIndex(newparent,nextindex-1);
but I also need to check for null ie if target parent is last then next parent will not exist ie null

Which drag-behavior you are using?

If you need to drop item only as child of something - you can use 

tree.setDragBehavior("child")

Now the onDrag event will provide only ID of item, on which source item was dropped, and you need not include any other parameters in calculations. 

tree.setDragBehavior("child")
tree.attachEvent("onDrag",function(sid,tid){
       if (this._allow_next_call) return true; //allow inner calls
       this._allow_next_call = true;

       if (this.getSubItems(tid)) //item has child
             this.moveItem(sid,"child",tid);
      else 
             this.moveItem(sid,"item_sibling",tid); //if there is no child - drop on the same level

       this._allow_next_call = false;
       return false; //block default drag processing
})

I'm using tree.setDragBehavior("sibling")

Examples to illustrate required use

1) reorder node items that are at the same level eg authors
eg move StephenKing above JaneAusten
Its useful to see the horizonal line that appears when moving -
I dont see this using tree.setDragBehavior("child") as I assume
you are expected to drop eg StephenKing into Horror parent folder icon

2) move a node item to another parent
eg move JaneAusten from parent Fiction to parent Classics

Also then want to do copy instead of move

Hello,
there is also complex mode tree.setDragBehavior("complex") It allows  to  combine  both  "sibling"  and "child"  modes.
To enable copying:
 tree.enableMercyDrag(true)

I've tried both tree.setDragBehavior("complex")
and they do not work for the specific problem I've already described,
take the following:-

--books
----classics
----horror
-------frankenstein

I want to move "frankenstein" as follows

--books
----classics
-------frankenstein
----horror

but this is not possible as my event handler function tondrag(id, newparent, idbefore)
does not give the target parent, it only supplies the target parents parent as follows

id=/books/horror/frankenstein
newparent=/books <<<<<<<<< I need /books/classics
idbefore=/books/horror/ <<<<<<this is the 'parent' after the insertion point not before

but if I have start with

--books
----classics
-------dracula
----horror
-------frankenstein

I can move as follows

--books
----classics
-------dracula
-------frankenstein
----horror

because my hander function tondrag(id, newparent, idbefore) supplies the target parent

id=/books/classics/frankenstein
newparent=/books/horror
idbefore=/books/classics/dracula

Remember I'm duplicating the tree layout and item order on my server.
So I do the move both in the tree and on the server ie once the drag-n-drop
takes place a reload from the server will leave the tree as is following
the drag-n-drop.

Sorry above should have read as below ie frankenstein moved to above dracula

"but if I have start with

--books
----classics
-------dracula
----horror
-------frankenstein

I can move as follows

--books
----classics
-------frankenstein
-------dracula
----horror

Ok I see whats wrong, the reason I see a failure is that dhtmlxTree sees
my horizontal drag line as applying to parents ie
1. if books exist then the line applies to books
2. if no books exist in a category like classics then the line applies to categories and not books

For 2 to get the same behaviour as 1 you need to drag the cursor to the category icon and then drop :(

Its annoying as I only want to allow drag-n-drop at the same level as per my examples.

Take what works - we have
--classics
<-----------------drag bar-------------->
----dracula
--horror
----frankenstein  <<< selected

then visually drag-n-drop is seen with a horizontal drag bar ie
release key and frankenstein  is dropped above dracula as a book

--classics
<-----------------drag bar-------------->
--horror
----frankenstein  <<< selected

again visually drag-n-drop is seen with a horizontal drag bar but
release the key and frankenstein  is dropped above horror but
not as a book instead as a new category

--classics
--frankenstein
--horror

Question is then how do I solve this?

I need to use the horizontal bar for ordering nodes.

[A] Tell the user to only use the horizontal bar when another book exists and
if not use the category icon? Do this via a popup? Not good.
A user would expect the same behaviour.

[B] still use the bar when the category is empty ie and in my code find the new
parent (id) into which I am dropping my book/

As stated my event handler function tondrag(id, newparent, idbefore)
does not give the target parent, it only supplies the target parents parent as follows

id=/books/horror/frankenstein
newparent=/books <<<<<<<<< I need /books/classics
idbefore=/books/horror/ <<<<<<this is the 'parent' after the insertion point not before

whereas I need
newparent=/books/classics

and as I stated in the first posting: maybe I can use
idbefore=/books/horror/ <<<<<<this is the 'parent' after the insertion point

var nextindex= getIndexById(idbefore);
var realparent= getItemIdByIndex(newparent,nextindex-1);

but if target parent is last then next parent will not exist ie
idbefore=null

in which case maybe I get all the subitems for /books and the last subitem is the new parent.

Working sample was sent by email. ( the info received in onDrag event is really not suitable for desired use-case - but it can be transformed to necessary one ) 


tree.attachEvent("onDrag",function(sid,tid,bid){
   if (this._allow_next_call) return true; //allow inner calls
   this._allow_next_call = true;

//get previous item ID
   if (!bid){
      if (tree.hasChildren(tid)) //last child
         bid = tree.getItemIdByIndex(tid,tree.hasChildren(tid)-1)
      else
         bid = tid; //has not childs - drop on parent
   } else {
      var ind = tree.getIndexById(bid);
      if (ind) //if has previous item
         bid = tree.getItemIdByIndex(tid,ind-1);
      else
         bid = tid; //else drop on parent
}

if (bid && tree.hasChildren(bid))
   tree.moveItem(sid,"item_child",bid); //drop if item already has childs
else
   tree.moveItem(sid,"item_sibling_next",bid);

this._allow_next_call = false;
return false; //block default drag processing
})

>>it only supplies the target parents parent as follows
targetID - ID of parent to the item, which is below drag-line-marker ( parent of below ) 
beforeID - ID of item, which is below drag-line-marker 

if drag item placed after last child on level - targetID will point to the parent of above item, and beforeID will have null value. 

Thanks for the quick response.

I pasted the handler into my code, renaming "tree" to my tree but
its not working as expected eg if I drag-n-drop dracula to under classics

-books
--classics
--horror
----dracula

results in

--classics
--dracula
--horror

(and same for moving from classics to horror)

Problem is classics has no children and move 'sibling' is used
if (bid && tree.hasChildren(bid))
  tree.moveItem(sid,"item_child",bid); //drop if item already has childs
else
   tree.moveItem(sid,"item_sibling_next",bid);

If  I amend and use tree.moveItem(sid,"item_child",bid);
then it works except in the drop handler where I call
s=atree.getSubItems(tid)
Although the handler parameter tid is correct == books/classics
the call returns with s= "books/horror/dracula" and so a count of 1 not 0.

I think my real problem lies with onDrop
"Event raised after drag-and-drop processed. Event also raised while programmatic moving nodes."
tree.getSubItems(tid) is coming back with incorrect data

If dracula has moved from books/horror to books/classics
then ondrop has tid=books/classics and I'd expected
tree.getSubItems(tid)  to return with books/classics/dracula
but instead tree.getSubItems(tid) returns with books/horror/dracula
which is wrong: onDrop is meant to be after the move but I assume
books/horror/dracula is a symbolic link ie the move is incomplete at this point

On second thoughts the problem lies with me and thinking in terms of a mv dir
ie I thought because dracula moved from horror/ to classics/ in the tree then
the itemId will change to reflect that but why should it. Its up to me to
rename it : so tree.getSubItems(tid) is ok.

>>I thought because dracula moved from horror/ to classics/ in the tree then
>>the itemId will change to reflect that but why should it.
Yep, the IDs are preserved as is. 
Technically they can be changed by using tree.changeItemId - it can be used after moveItem to set new ID, according to the scheme, used in your case

>>I think my real problem lies with onDrop
If you are using onDrag with custom logic - it better place your custom logic after calling moveItem with custom parameters , because here all necessary ids already known