I'm using TinyMCE and I'd like to make it easy to click and drag styled elements inside the content area. This works very well for (unstyled) images, as the browser seems to handle them natively, so you can drag an image and drop it on another line in the content area and the image gets moved there.
What I'd like to do is have a div within the content area that has an image and a caption, and if you click anywhere inside that div you can drag and drop the whole thing to another part of the content area. What happens now is if I click on the image inside the div and drag it, it gets dragged out of the div. For instance, if I have an image inside a div with style="border: 1px solid black", after I drop the image somewhere I'm left with an empty div with a black border, but what I want is for the image and the containing div to be moved somewhere else as though they were a single drag-and-droppable item.
Is this possible?