jQuery droppable 不触发？

Question

我正在对下面的拖放示例进行原型设计，除了我无法触发 drop 事件之外，它正在执行我要求的所有操作。

元素只是还原而不粘贴到内容 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 选项，它会在droppable 上的drop 事件触发之前还原每一滴。替换这个：

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/