Start Building Professional
Web Apps Today

Hello,

I want to define/customize drag and drop rules in Tree. I have ‘Groups’ and ‘Sections’(I am differentiating Groups and Sections with different icons) in the tree as shown below:

Group1

Section 1

Section 2

Group 2

Section 3

Group 3

Section 4

Group 5

Group 6

Section 5

Section 6

Section 7

Group 7

Group can have sections and Groups as child nodes. Section NEVER have Group as a child. I could not able to perform the required functionality while using default drag and drop functionality. So, I want to customize default drag and drop functionality – any group node cannot be droppable under Section. Please let me know the best to perform the required above functionality.

Thanks,

RamaRao R.

Hello,

You can assign a property to each node that distinguishes groups from sections. It is possible using userdata:

<item...><userdata name="is_group">1</userdata></item>

<item...><userdata name="is_group">0</userdata></item>

or tree.setUserData(itemId,"is_group",1);

And using onDragIn event you can block dragging sections into groups:

tree.attachEvent("onDragIn",function(sId,tId){

    return !(tree.getUserData(sId,"is_group")&&!tree.getUserData(tId,"is_group"));

})