Niepowtarzalna instancja tinyMCE nie działająca z JQueryUI .draggable

Question

Mam dynamicznie utworzone pole tekstowe TinyMCE (za pomocą zewnętrznego paska narzędzi) wewnątrz elementu div kontenera. Próbuję go przeciągnąć i zmienić rozmiar (cały obszar tekstu).

jQueryUI's .draggable() współpracuje z tinyMCE, ale jeśli użyję .resizable(), zewnętrzny pasek narzędzi tinyMCE nie pojawia się po kliknięciu obszaru. Jeśli użyję opcji zmiany rozmiaru tinyMCE w jej ustawieniach, gdy kliknę, aby przeciągnąć, aby ją zmienić, zepsuła funkcję przeciągania jqueryUI (całe okno podąża za myszą, a także zmienia rozmiar i nie pozwala odejść).

Answer 1

I rozwiązać ten problem za pomocą opcji handle jQuery ui przeciągane i zwrotnego funkcję oporu:

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

Answer 2

to roztwór

".mce-resizehandle" klasa przycisku TinyMCE zmiany rozmiaru

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

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