可调整大小的tinyMCE实例无法使用jqueryUI的.draggable

时间:2012-05-24 16:06:13

标签: jquery-ui tinymce draggable resize resizable

我在容器div中有一个动态创建的TinyMCE textarea(使用外部工具栏)。我试图让它成为可拖动的,并且可以调整大小(整个文本区域)。

jQueryUI的.draggable()适用于tinyMCE,但是如果我使用.resizable(),当我点击该区域时,tinyMCE外部工具栏不会出现。如果我在其设置中使用tinyMCE的调整大小选项,当我单击拖动以调整它的大小时,它会破坏jqueryUI的可拖动功能(整个框跟随鼠标以及调整大小,并且不会松开)。

2 个答案:

答案 0 :(得分:0)

我使用jquery ui draggable的handle选项和拖动函数回调解决了这个问题:

div.draggable.handle = "div[role=group], td.mceLast";
div.draggable.drag = function ( event, ui ) {
    if ( $( event.srcElement ).is( '.mceResize' ) || $( event.originalEvent.target ).is( '.mceResize' ) ) {

        return false;
    }
};

答案 1 :(得分:0)

这是解决方案

“。mce-resizehandle”是tinymce resize按钮的类

$( ".selector" ).resizable({
  cancel: ".mce-resizehandle,input,textarea,button,select,option",
});

$( ".selector" ).draggable({
  cancel: ".mce-resizehandle,input,textarea,button,select,option",
});