Question

I’m prototyping a drag and drop example below which is doing everything I ask except that I cannot get the drop event to fire.

The elements just revert without pasting into the content div. Any ideas what I’m missing

    <ul class="keywords">
        <li class="draggable" id="kw-1">keyword one</li>
        <li class="draggable" id="kw-2">keyword two</li>
        <li class="draggable" id="kw-3">keyword three</li>
    </ul>


    <div id='editorcontainer'>
        <textarea rows='10' class='theEditor' cols='40' name='content' id='content'>drop content here</textarea>
    </div>


    jQuery(".myDiv").find("li").each(function(){
    jQuery(this).draggable(
    { 
        revert:true, 
        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') //DOES NOT FIRE!
            //drop text into content editor
        } 
    });

Answer 1

You’re using the revert:true option, which is reverting every single drop before the drop event on the droppable fires. Replace this:

jQuery(this).draggable(
{ 
    revert:true, // <-- Revert every single drop
    helper:'clone', 

    start: function(event, ui) {
        jQuery(this).fadeTo('fast', 0.5);
        }, 

    stop: function(event, ui) { 
        jQuery(this).fadeTo(0, 1); 
        } 
});

With this:

jQuery(this).draggable({
        revert: 'invalid', // <-- Revert invalid drops
        helper: 'clone',

        start: function(event, ui) {
            jQuery(this).fadeTo('fast', 0.5);
        },

        stop: function(event, ui) {
            jQuery(this).fadeTo(0, 1);
        }
});

Example: http://jsfiddle.net/7t56R/