setDragBehavior("complex"); --not expected behavior and bug

Suite and Optimus Suite 5
#1

Using TreeGrid (pro) I am finding the drag and drop behavior not to work in an expected manner.

Using setDragBehavior(“complex”), if a node is drag on top of target node, it highlights the target node in red indicating it will become a child if dropped. A line indicates the node will be inserted between the node above and below the line. Fine.

When dropping a node on top of another node, the issue is the node is added as a last child, not a first.

Take for example the following:

A
B
C
D
E

I’d like to move node D to be the first child of A. If I drag D on top of A, D is added as the last child of A i.e.

A
B
C
E
D

I would have expected:
A
D
B
C
E

If I wanted D to be the last child of A, I would have dragged it below E (as a line below E). Given that hovering over A expands its children, I think dropping as ‘first child’ is totally the expected behavior since the user can drop within the children if they want it to be ‘last child’. Alternatively, the default drop position on hover could be configurable.

Using the first example again, trying to move D as the first child of A, I could drag D above B so that there is a line above B and drop it. That however adds D below B. The behavior is probably related to the bug I’m seeing below…

The drag and drop seems to be buggy. Using the initial example:

A
B
C
D
E

If I drag E between B and C, it is sometimes placed between B and C and sometimes between C and D. The only relation I can find seems to be the mouse cursor position in relation to the line while dragging. If the cursor is above the line (and therefore closer to B), it will go between B and C . If the cursor is below the line (and therefore closer to C) it will be dropped between C and D. This seems repeatable. It appears the calculation is not based on the line itself but on the mouse position’s closeness to a node. Is there a fix for this?

Testing was done in both Chrome(Version 33.0.1750.154 m) and Firefox (28.0) (both latest as of today). I am not sure what version number of the TreeGrid pro I’m using. Is there a place to find this?

#2

Sorry, my formatting was removed in the above examples. In all example A is the parent node and the other nodes are children of A.

#3

this is the designed behavior.
Please, try to use the “complex-next”
mygrid.setDragBehavior(“complex-next”);

docs.dhtmlx.com/doku.php?id=dhtm … agbehavior

#4

‘complex-next’ doesn’t change the behavior of the drop position relative to the indicator line.

I think the designed behavior is confusing for most users. Most users would expect the node to be dropped where the line is showing i.e. between A and B as shown below.

Dragging node X

Node A
_____ <== indicator line shown while dragging node …would expect the drop to occur here
Node B

Resulting (always) in
A
X
B

The above is simple, intuitive and easy to understand for any user.

The way it works ‘by design’ is very confusing. I don’t think any user would expect to see an indicator line pop up while dragging and then (with no other feedback) suddenly realize they also now need to ‘just slightly’ adjust the mouse cursor above or below (and move it ‘just enough’ that it does not trigger the drop as child position) in order to set the actual drop position

Node A
_______ <== move mouse between A and B to get line … now adjust cursor up above line
Node B

to get:

A
X
B

…And…

Node A
_______ <== move mouse between A and B to get line … now adjust cursor down below line
Node B

To get:

A
B
X

This behavior may be easier to implement, but I would not call it very user friendly. If I wanted to drop below B while hovering between A and B I’d just

Node A
Node B
__________ <== drop here like the line (should) indicate

I’ll try to find a way to hack the behavior I want. I’ll make the suggestion you implement a drag and drop like I’m showing as an option because it would appeal to the majority of users.

If you want an example of a useable indicator line (although this tree has other issues)… mbraak.github.io/jqTree/examples … _drop.html

Thank you.

#5

The drag line indicator is a bug.

I have two files dhtmlxtreegrid.js and dhtmlxtreegrid_pro.js. Since this is not my project, I do not know the history of why there are two.

The first was being referenced and showing the above behavior. When I changed references to the second file, the indicator lines works as expected. The tree node is dropped where the line is showing.

Perhaps dhtmlxtreegrid.js is an earlier evaluation version that has since been fixed.