jQuery - ドロップ時のみクローンdiv

Question

ドロップしたときに特定のdivの「クローン」を作成するにはどうすればよいですか？このクローンは、ドラッグを開始して再びドラッグする準備ができたら同じポイントにする必要があります。

たとえば、fiddleは、緑色要素を最初の位置に複製することができます。これらの要素は、ドロップされたときにのみコピーできますか？事前に

$(function() { 
    $("#dragrabble-one").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-two").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-three").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-four").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-five").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-six").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-seven").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-eight").draggable({ 
    helper: 'clone' 
    }); 
    $("#dragrabble-one").draggable({ 
    revert: "invalid" 
    }); 
    $("#dragrabble-two").draggable({ 
    revert: "invalid" 
    }); 
    $("#dragrabble-three").draggable({ 
    revert: "invalid" 
    }); 
    $("#dragrabble-four").draggable({ 
    revert: "invalid" 
    }); 
    $("#dragrabble-five").draggable({ 
    revert: "invalid" 
    }); 
    $("#dragrabble-six").draggable({ 
    revert: "invalid" 
    }); 
    $("#dragrabble-seven").draggable({ 
    revert: "invalid" 
    }); 
    $("#dragrabble-eight").draggable({ 
    revert: "invalid" 
    }); 
    $("#droppable-box").droppable({ 
    drop: function(event, ui) { 
     var clone = ui.helper.clone(); 
     clone.draggable(); 
     clone.appendTo('#droppable-box'); 
    } 
    }); 
}); 

ありがとう：

これは私のJSです。

Answer 1

A ユーザーが要素をドラッグしたときに不透明度が0のクローン要素を非表示にし、ドラッグが停止したときに不透明度を1に戻すという解決策があります。

$("#dragrabble-one").draggable({ 

    helper: 'clone', 
    start: function (event, ui){ 
     $(this).css('opacity','0'); 
    }, 
    stop: function (event, ui){ 
     $(this).css('opacity','1'); 
    } 

}); 

この情報がお役に立てば幸いです。 :)