组合Draggable,Resizeable和Aloha Editor ExtJS组件

时间:2013-09-04 17:01:07

标签: extjs extjs4 jquery-draggable aloha-editor html5-draggable

我正在尝试创建一个Ext.Component,我可以使用Draggable,Resizable,Float和Aloha Editor。

目前我尝试过:

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

这个不允许它可拖动,但编辑工作。

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

这个允许它被重新调整大小并拖动,但是aloha不起作用,因此它不可编辑。

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

这一次允许编辑但不能拖动。

似乎在调整大小或拖动事件时手柄出现的时刻aloha编辑器停止工作,但是如果没有句柄,则拖动和调整大小停止工作。有什么建议,或者之前有没有遇到过这个?

1 个答案:

答案 0 :(得分:0)

要解决这个问题,我做了一个Move Handler,HTML5风格:

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

让我的主画布成为掉落区域。

接下来,我在组件内添加了一个可编辑的小div。

并且能够制作那个div aloha。只要您使边缘透明,默认的缩放器就可以工作。