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).
, 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; } };
". mce-resizehandle" - tinymce
$( ".selector" ).resizable({ cancel: ".mce-resizehandle,input,textarea,button,select,option", }); $( ".selector" ).draggable({ cancel: ".mce-resizehandle,input,textarea,button,select,option", });