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/

jQuery droppable没有解雇？

1 个答案: