Add jQuery .draggable() to TinyMCE image

Question

I created a plugin to ajax images and you tube embedded videos into a TinyMCE editor. This works great but I can't find a way to attach the .draggable() j Query event to the ajax-ed image inside the editor.

I have tried: (I wrapped the imaged in a div with class dr)

Binding a mouse-down event and then setting $(".dr").draggagle();. Applying it directly to the class.

The closest I got was the following code in the tinyMCE init code:

 ed.onClick.add(function(ed, e) {
        alert('Editor was clicked: ' + e.target.nodeName);
 });

But I can't applay the draggable() to the e.target\e.target.nodeName for the life of me.

Any ideas?

Answer 1

Due to the fact that tinymce is not equal the editors source html element (for example a textarea) $(".dr").draggable(); won't address the desired element. You will have to use $(ed.getBody()).find(".dr").draggable(); to get the desired result.

Mark: Let me know if this suits you well or not ( it works on my system ).

Update: Make sure you call the dragable after tinymce is initialized other wise it won't work.