Resizable tinyMCE instance not working with jqueryUI's .draggable

5
votes

I have a dynamically created TinyMCE textarea (using an external toolbar), inside a container div. I'm trying to get it to be draggable, and resizeable (the whole text area).

jQueryUI's .draggable() works with tinyMCE, but if I use .resizable(), the tinyMCE external toolbar doesn't appear when I click on the area. If I use tinyMCE's resizing option in its settings, when I click to drag to size it, it breaks the draggable function of jqueryUI (the whole box follows the mouse as well as resizing, and won't let go).

2
jquery-uitinymcedraggableresizeresizable
I'm having the exact same problem. Your question is: How can you drag the resizable over the tinymce area? - Andrei Cristian Prodan
Did you guys manage to solve this? - user961627

2 Answers

0
votes

I solved this problem using the handle option of jquery ui draggable and the drag function callback:

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
votes

This is solution

".mce-resizehandle" is class of tinymce resize button

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

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