TinyMce4 dom add element with draggable (jquery)

Question

Hello i am using TineMce4.

I build a new plugin that add new element(p) to my text editor.

Now i need to make in element that i have added --> draggable/drag and grop with-> (jquery).

i tried to add classes of draggable to this element

This is not working.

i think that i need to use the jquery MyElemet.draggable(); on this element,but i dont know how.

Do any one know how to make element that i adding to text editior draggable?

My code:

 tinymce.create('tinymce.plugins.AddContent', {

    init : function(ed, url) {
        ed.addCommand('mceAddContent', function() {
 tinyMCE.activeEditor.dom.add(tinyMCE.activeEditor.getBody(), 'p', { 'class': 'draggableTemplate' }, 'Some Text ...');
 // tinyMCE.activeEditor.dom.add(tinyMCE.activeEditor.getBody(), 'p', { 'class': 'draggableTemplate' }, 'Some Text ...').draggable();//not working

        });

        // Register example button
        ed.addButton('addcontent', {
            title : 'Add content at the end',
            cmd : 'mceAddContent',
            image: url + '/img/addcontent.png',
            onclick: function () {

               //var editor = tinymce.activeEditor;
               //var ed_body = $(editor.getBody());
               //ed_body.find('p').draggable();//not working
            }
        });
    }
    });

    // Register plugin with a short name
    tinymce.PluginManager.add('addcontent', tinymce.plugins.AddContent);

Answer 1

I found this solution, you need to use $(editor.getBody()) find by class , and then make it draggable.

Here is the Updated code of addCommand:

  ed.addCommand('mceAddContent', function () {
 tinyMCE.activeEditor.dom.add(tinyMCE.activeEditor.getBody(), 'p', {  'class': 'draggableTemplate' }, 'Some Text ...');
            var editor = tinymce.activeEditor; 
            var ed_body = $(editor.getBody());
            ed_body.find('.draggableTemplate').draggable();

        }),

Full code:

tinymce.create('tinymce.plugins.AddContent', {

    init: function (ed, url) {
        ed.addCommand('mceAddContent', function () {
            var el = tinyMCE.activeEditor.dom.add(tinyMCE.activeEditor.getBody(), 'p', {  'class': 'draggableTemplate' }, 'Some Text ...');
            var editor = tinymce.activeEditor; 
            var ed_body = $(editor.getBody());
            ed_body.find('.draggableTemplate').draggable();

        }),

        // Register example button
        ed.addButton('addcontent', {
            title: 'Add content at the end',
            cmd: 'mceAddContent',
            image: url + '/img/addcontent.png',
            onclick: function () {

            }

        });

    }

});

// Register plugin with a short name
tinymce.PluginManager.add('addcontent', tinymce.plugins.AddContent);