CODEWITHSUNDEEP
jquerytinymcedraggable
Naterade
Naterade

Reputation: 2675

Add jQuery .draggable() to TinyMCE image

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?

Upvotes: 3

Views: 2140

Answers (2)

Thariama
Thariama

Reputation: 50832

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.

Upvotes: 3

Md Toufiqul Islam
Md Toufiqul Islam

Reputation: 178

Wrap a div around the image and specify its width and height. Then apply jquery draggable function within live function for example:

$('#mydiv').live(function(){$(this).draggable()});

Upvotes: -1

Related Questions