Drag and drop dhtmlxTree item to Iframe document


I would like to be able to drag an item on a dhtmlxTree into a contenteditable html document within an iframe inside a dhtmlXTabbar and perform custom processing on it. I do not want it to interfere with normal drag and drop within the document or between it and other html documents within iframes.

How would I accomplish this? I have tried using dragger.addDragLanding without an luck.

Kind Regards,


Please, check this sample:
dhtmlx.com/docs/products/dht … frame.html
It must help you


Thanks again for your help. I think I have a pretty good grasp of how to drag and drop between trees or even between a tree and the div element that bounds the tab label, but not into the contents of an Iframe.

In my example, I have a tree with nodes that represent different documents on the left pane of a layout control and an html editor in the right pane. The idea is to be able to drag a node that represents the image (png, etc.) and drop it in the editor. At that point, the editor would take the graphic link from the node and use it to insert the image in the document…

In your example, how would you drag and drop a tree item into the green iframe?




it is possible to combine dhtmlx.com/docs/products/dht … frame.html and
dhtmlx.com/docs/products/dht … g_out.html

I have attached the working demo. Note that page inside an iframe contains the following statement:

new dhtmlDragAndDropObject();

Here are docs:
docs.dhtmlx.com/doku.php?id=dhtm … es_iframes
dd_iframe.zip (37.3 KB)


Thanks for the example. It definately helped me go further, but I still need some help.

I tried wiring up the addDragLanging to the body element in the iframe document and was able to drop treenodes on the document and have it do things. I was unable to figure out how to get to where the drop happened so that I could insert text there or do something at that place in the document. If you could show me how to do that, that would be great.

I have no interest in an input element. Just in inserting some text in the document in the iframe where the drop occurred.


There is a 4th parameter in _drag - you can cath the target object

Replace code of 'content.html; file with the code below:







That is exactly what I was looking for. Thank you once again.

One last question for the topic:

Is there a way to perform this operation without requiring script to be inserted into the html document inside the iframe?



Unfortunatelly, not.