jQuery drag and drop over reflowable content

[Joyroicky]

I am currently designing an inline text editor. Users will have the ability to drag and drop images into the editor anywhere they want. The editor is entirely \[code\]iFrame\[/code\] based, heavily relying on nested \[code\]div\[/code\]s for styling and formatting. Now if I the user drags the image into the middle of the content and drops it there, I want that the content above the drop zone be packaged into one \[code\]div\[/code\], the image being placed below it, and the content below the drop zone packaged into another \[code\]div\[/code\] and placed below the image. But I have no idea how to split a \[code\]div\[/code\] into two parts based on co-ordinates (which can be obtained from the jQuery drop handler). Can anyone give me an idea on how to do it?