Specific drag and drop permissions

[Lennart Hazelbag]

When you have a (mvc) treeview, you can hook up some drag and drop events, but how you can check if a specific node can be dragged or dropped based om custom criteria? And when a node is dropped, but is not allowed to be dropped on a specific node, how can revert the result?

[Sunil Prabakar C]

Hi Lennart,

Thanks for using Syncfusion products.

 

Regarding Query 1: Checked a specific node can be dragged or dropped.

 

When the “DragandDrop” property of TreeView control is set as true all the nodes of the TreeView control is rendered with the class “ui-droppable” and “ui-draggable”.

So we suggest you to use the class “ui-droppable” and “ui-draggable” to check if  a node can be dragged or dropped. Kindly refer the following code snippet.

 

<Code>

[Javascript]

function NodeCLick(sender,args) {

if ($("#" + args._id).hasClass('ui-droppable'))

alert("True");

else

alert("false");

}

 

</Code>

 

Regarding Query 2: When node is dropped on specific node need to revert the result.

To prevent the node dropping, when the node try to drop on specific node, you can use the “ClientSideOnDropping” clientside event and “set_DropChild()” ClientSide API of TreeView control.

Here we prevent the node dropping based on node id. Please refer the following code snippet.

 

<Code>

[Javascript]

function onDropping(sender,args) {

if ($(args._target).parents('li:first').attr('id') == "li12")

sender.set_DropChild(false);

else

sender.set_DropChild(true);

}

</Code>

For your convenience we have prepared a sample to exhibit this behavior and it is available in the following link.

TreeViewDragDrop.zip

Kindly let us know if you have any other queries.

Regards

Sunil Prabakar C