jQuery drop event inside of TinyMce Orchard

Question

I am building website with Orchrad. i am using tinymce4 html editor to build landing pages. i don't have a problem to catch event when i add new item to my html editor BUT i need to catch jQuery drop event inside of TinyMce html editor ,and append class to element that was dragged inside of html editor and dropped(moved to different position)

How can i cath jQuery drop event inside of TinyMce html editor?

My orchrd-tinymce.js code:

var mediaPlugins = "";

if (mediaPickerEnabled) {
    mediaPlugins += " mediapicker";
}

if (mediaLibraryEnabled) {
    mediaPlugins += " medialibrary";
}

tinymce.init({

    theme_advanced_font_sizes: "10px,11px",
    font_size_style_values: "12px,13px",
    language: 'en',
    selector: ".tinymce",
    relative_urls: false,
    visualblocks_default_state: true,

    plugins: [
        "dragresize directionality advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
        "searchreplace wordcount visualblocks visualchars contextmenu code fullscreen insertdatetime media nonbreaking",
        "save table emoticons template paste textcolor colorpicker textpattern addcontent",
        mediaPlugins
    ],

    cleanup_on_startup: false,
    trim_span_elements: false,
    verify_html: false,
    cleanup: false,
    convert_urls: false,
    force_br_newlines: false,
    force_p_newlines: false,
    forced_root_block: '',
    paste_retain_style_properties: "font-size,color,background,font-family",
    paste_data_images: true,
    paste_as_text: false,
    paste_word_valid_elements: "@[style],strong,b,em,i,u,div,span,p,ol,ul,li,h1,h2,h3,h4,h5,h6,table[width],tr,td[colspan|rowspan|width],th,thead,tfoot,tbody,a[href|name],sub,sup,strike,br",
    paste_webkit_styles: "color font-size font-family background",
    paste_auto_cleanup_on_paste: false,
    paste_remove_styles: false,
    paste_remove_styles_if_webkit: false,
    paste_strip_class_attributes: false,

    toolbar: "example | example1 | dragresize | ltr | rtl | sizeselect | bold italic | fontselect |  fontsizeselect | insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor template addcontent | " + mediaPlugins,


     setup: function (ed) {
        ed.addButton('example', {
            title: 'Activate Drag',
            image: 'https://cdn1.iconfinder.com/data/icons/KDE_Crystal_Diamond_2.5_Classical_Mod/128x128/mimetypes/html.png',
            onclick: function () {

 var editor = tinymce.activeEditor;
 var ed_body = $(editor.getBody());
 ed_body.find('*').draggable();//here i make all items draggable

  }
        });


    },



    fontsize_formats: "8px 9px",

});

Tried this,and this is not working:

$(".html tinymce").droppable({
    drop: function (event, ui) {
        $(this)
          .addClass("MyClass");

    }
});

Answer 1

I found this solution:

Add this to your setup:

  ed_body.droppable({
                    drop: function (event, ui) {
                        $(ui.draggable).addClass("Myclass");

                    }
                });

UPDATED setup

setup: function (ed) {
        ed.addButton('example', {
            title: 'Activate Drag',
            image: 'https://icons/KDE_Crystal_Diamond_2.5_Classical_Mod/128x128/mimetypes/html.png',
            onclick: function () {

              var editor = tinymce.activeEditor; 
              var ed_body = $(editor.getBody());
              ed_body.find('*').draggable();


                ed_body.droppable({
                    drop: function (event, ui) {
                        $(ui.draggable).addClass("MyClass");

                    }
                });

            }
        });