Styling dragged nodes


#1

Hi,

I have a tree component and am dragging nodes into a scheduler component to create events. I would like to do several things and have not found a solution:

  1. Center the dragSpanDiv under the mouse pointer when a node is being dragged (insead of having the div to the lower right)

  2. Change the size and other attributes of the dragSpanDiv based on data in the tree node

Any help would be appreciated.

TIA


#2

Hi,

Center the dragSpanDiv under the mouse pointer when a node is being dragged (insead of having the div to the lower right)

Unfortunately, there is not such an option in Tree.

Change the size and other attributes of the dragSpanDiv based on data in the tree node

dhtmlDragAndDrop.dragNode refers to dragged html element. This element is created after onBeforeDrag event, but before onDragIn. So, you can customize dragNode in the onDragIn event handler set a flag in the onBeforeDrag to call customization only once:

myTree.attachEvent("onBeforeDrag", function(){
	dndStarted = true;
	return true;
});
myTree.attachEvent("onDragIn", function(){
	if(dndStarted){
		dhtmlDragAndDrop.dragNode.innerHTML = "new content";
		dndStarted = false;
	}
	return true;
});