Combined Draggable, Resizeable and Aloha Editor ExtJS component

Question

I am trying to create an Ext.Component, that I can use with Draggable, Resizable, Float and Aloha Editor.

Currently I have tried:

afterRender: function(me) {
    Aloha.jQuery('#' + me.myId).aloha();
    document.getElementById(me.myId).setAttribute("draggable", true);
}

This one doesn't allow it to be draggable, but edit works.

Aloha.jQuery('#' + me.myId).aloha();
draggable: true,
resizeable: true,
float: true

This one allows it to be re-sized and dragged around, however it aloha doesn't work, therefor it is not editable.

Aloha.jQuery('#' + me.myId).draggable();
Aloha.jQuery('#' + me.myId).aloha();

Again this one allows for editing but not dragging.

It seems like the moment the handles come on for a resize or drag event the aloha editor stops working, however if there are no handles the drag and resize stop working. Is there any advice, or has anyone encountered this before?

Answer 1

To Solve this, I did a Move Handler, HTML5 Style:

http://www.w3schools.com/html/html5_draganddrop.asp

And made my main canvas the drop area.

Next I added a small div inside the component which is editable.

and was able to make that div aloha. Then the default resizer works as long as you make the edges transparent.