Trường hợp tinyMCE có thể chỉnh sửa không hoạt động với jqueryUI's .draggable

Question

Tôi có một textarea TinyMCE được tạo động (sử dụng thanh công cụ bên ngoài), bên trong div vùng chứa. Tôi đang cố gắng làm cho nó có thể kéo được và có thể thay đổi lại (toàn bộ vùng văn bản).

jQueryUI's .draggable() hoạt động với tinyMCE, nhưng nếu tôi sử dụng .resizable(), thanh công cụ nhỏ bên ngoài không xuất hiện khi tôi nhấp vào vùng đó. Nếu tôi sử dụng tùy chọn thay đổi kích thước của tinyMCE trong cài đặt của nó, khi tôi nhấp để kéo để kích thước, nó sẽ phá vỡ chức năng kéo của jqueryUI (toàn bộ hộp sau chuột cũng như thay đổi kích thước và sẽ không buông bỏ).

Answer 1

tôi giải quyết vấn đề này bằng cách sử dụng tùy chọn handle jquery ui kéo và chức năng kéo 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; 
    } 
}; 

Answer 2

Đây là giải pháp

".mce-resizehandle" là lớp các nút TinyMCE thay đổi kích thước

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

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