Volatile tinyMCE instance not working with jqueryUI.draggable

I have a dynamically created TinyMCE text area (using an external toolbar) inside a div container. I am trying to get it to drag and resize (the entire area of ​​the text).

jQueryUI.draggable () works with tinyMCE, but if I use .resizable (), the tinyMCE outer panel does not appear when I click on the area. If I use the tinyMCE resize option in my settings, when I click to drag its size, it breaks the jqueryUI drag and drop function (the whole block follows the mouse, and also resizes and doesn't let go).

+5
source share
2 answers

, handle jquery ui draggable drag:

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;
    }
};
0

". mce-resizehandle" - tinymce

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

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

All Articles