Drop as first item in the tree?

Suite and Optimus Suite 5
#1

Hi,

I have a tree where the items may only be dragged & dropped within the same level.

I initialize the tree with

this.treeObject.enableDragAndDrop(true,false);
this.treeObject.setDragBehavior("sibling", true);

Lets say my tree looks like this (I leave out the children for simplicity):

item_1
item_2
item_3

When I drop item_3 over item_1 it always inserts it after item_1. Is it possible to drop it before item_1 when the mouse was in the upper half of the height of item_1’s line?

#2

What I forgot:
It should show the vertical line above item_1 already when hovering over it with the mouse button still pressed.
Of course I could move the items around afterwards, but that would not be intuitive for the user.

I’m using version 3.5.

#3

Hi,

sibling mode allows to drop an item before the first item in a branch:

dhtmlx.com/docs/products/dht … bling.html

#4

Try to drag the Magazines over Books. This is not possible. It will insert Magazines as a child of Books.

#5

Hi,

yes, sibling allows to drop an item after the selected item. Possibly you could use complex mode …:

dhtmlx.com/docs/products/dht … mplex.html

#6

I ruled that out because I don’t want to move the items in the hierarchy. I only need to move them within the same level (don’t change the parent).
But now I see that you can also move the items above others in complex mode. I’ll play a bit with that, thanks!

#7

That does not work because the DragIn event handler is called with the same item id as 2nd parameter when you drag the item so that the line above it is shown or the whole text is highlighted to indicate that it will be inserted as a child.

Here at the left I dragged the Magazines folder over the middle of Books so the item would be inserted as child of Books - which I don’t want.
And on the right my mouse is over the top part of Books so Magazines would be dropped above Books. This should be allowed.

But in both situations the DragIn handler is called with the same parameters so I don’t know whether to return true or false.

#8

You can redefine _setMove method in the dhtmlxtree.js. Find the original method in the library:

dhtmlXTreeObject.prototype._setMove=function(htmlNode,x,y){
…
}

Here you should replace the following snippet:

if ((Math.abs(z)-htmlNode.offsetHeight/6)>0) { this.dadmodec=1; //sibbling zone if (z<0) this.dadmodefix=0-htmlNode.offsetHeight; } else this.dadmodec=0; }

with this one:

this.dadmodec=1; //sibbling zone if (z<0) this.dadmodefix=0-htmlNode.offsetHeight;

In this case complex will behave like sibling and drag-n-drop into the first position will be possible.

The redefined method should be included before tree

#9

Hi,
Where can i place this code:

if ((Math.abs(z)-htmlNode.offsetHeight/6)>0)
{
this.dadmodec=1;
//sibbling zone
if (z<0)//what is this z?
this.dadmodefix=0-htmlNode.offsetHeight;
}
else this.dadmodec=0;
}

if i placed it in

dhtmlXTreeObject.prototype._setMove=function(htmlNode,x,y){
…
}

it is saying an error like : z is undefined