1

我正在为下面的拖放示例制作原型，该示例正在执行我要求的所有操作，但我无法触发 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
        } 
    });
4

1 回答 1

2

您正在使用该选项，该选项在火灾事件发生revert:true之前还原每一滴。替换这个：dropdroppable

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/

于 2011-08-04T20:31:53.823 回答