Tell me more ×
WordPress Answers is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.
up vote 1 down vote favorite

I'm trying to enable the WordPress content editor as a droppable using jQuery UI drag and drop. However, I can't get the drag to drop, or the drop event to fire.

Is there something I'm missing?

<ul id="keywords">
    <li>drag one</li>
    <li>drag two</li>
    <li>drag three</li>
</ul>

jQuery("#keywords").find("li").each(function(){jQuery(this).draggable(
{ 
    helper:'clone', 
    start: function(event, ui){
        jQuery(this).fadeTo('fast', 0.5);}, 
        stop: function(event, ui) { 
            jQuery(this).fadeTo(0, 1); 
            } 
        });
    });

jQuery('#content').droppable(
{ 
    drop: function(event, ui)
    {
        alert('dropped in content'); //DOES NOT FIRE!!!
        jQuery(this).dropIt(ui.draggable.html());
    } 
});

if(typeof tinyMCE=='object')
{ 
    alert('tinyMCE is active'); //DOES NOT FIRE!!!
    jQuery('#editorcontainer').droppable(
    { 
        drop: function(event, ui) 
        { 
        alert('dropped in tinyMCE editor'); //DOES NOT FIRE!!!
        //Dynamically add content
        tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'New content.');
        } 
    });
}
share|improve this question
1  
TinyMce doesn't use #content, that's hidden away in the background so to speak, TinyMCE creates a frame where content is managed, which is then later sent(or inserted) into the original textarea. @cheesypeanut has you covered. – t31os Aug 5 '11 at 0:19
Thanks t310s. Appreciate the clarification. – Scott B Aug 8 '11 at 19:31
Why isn't your jQuery fired on document ready? If you're firing before that, TinyMCE hasn't done it's thing yet.. – t31os Aug 9 '11 at 0:01

2 Answers

up vote 2 down vote accepted

In the above example the following line:

jQuery(".myDiv").find("li").each(function(){

should be:

jQuery(".keywords").find("li").each(function(){

That should enable the list items to be dragged and dropped.

To allow the items to be dropped on the TinyMCE textarea the following code works.

$('#editorcontainer').droppable({ 
    drop: function(event, ui) { 
        alert('dropped'); //NOW FIRES!
        //Dynamically add content
        tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'New content.');
    } 
});
share|improve this answer
That was just an input error when I created the question. I've changed it, but that's not the problem. Still no drop event fires. – Scott B Aug 4 '11 at 21:52
Try the solution that I've added above. – cheesypeanut Aug 4 '11 at 23:26
Testing it now. Thanks cheesypeanut! – Scott B Aug 8 '11 at 19:32
it certainly makes sense, but at least in my test sites (running wordpress 3.2.1), I cannot get the drop alert to fire. +1 anyway. I've reposted my code if you or anyone else sees what I'm missing. – Scott B Aug 8 '11 at 19:50
up vote 2 down vote

Try to declare on TinyMCE body's tag like this, it works for me

On tiny_mce_src.js

t.iframeHTML += '</head><body ondrop="parent.drop(event);"  " id="' + bi + '" class="mceContentBody '+ t.id +'_cl' + bc +'" onload="window.parent.tinyMCE.get(\'' + t.id + '\').onLoad.dispatch();"><br></body></html>';

On editor's page:

    function drop(ev)
    {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Text");
            tinyMCE.execCommand('mceInsertContent',true,data);
    }
    function allowDrop(ev) {
            ev.preventDefault();
    }

    function drag(ev) {
            var html = $('#'+ev.target.id).html();
            ev.dataTransfer.setData("Text",html);
    }

It's seems using jquery with TinyMCE doesn't work ...

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.