JQuery сбрасывается, не стреляя?

Question

Ниже я создаю прототип примера перетаскивания, который выполняет все, что я прошу, за исключением того, что я не могу запустить событие перетаскивания.

Элементы просто возвращаются без вставки в содержимое div. Любые идеи, что мне не хватает

    <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

Вы используете опцию revert:true, которая восстанавливает каждую каплю до того, как событие drop на droppable сработает.Замените это:

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); 
        } 
});

На это:

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);
        }
});

Пример: http://jsfiddle.net/7t56R/