jquery UIドロップがヘルパークローンで機能しない

Question

jquery UIを使用して簡単なドラッグアンドドロップができました。私は、要素をクローンし、クローンをカーソル位置にドロップしたい。

$(function() { 
    $("#draggable").draggable({ 
     grid: [ 20, 20 ], 
     //helper: 'clone', 
    }); 

    $("#dropzone-panel").droppable({ 
     drop: function(event, ui) { 
      console.log("Drop Event Fired"); 
     } 
    }); 

}); 

私は要素をドラッグでき、ドロップすると正しい位置にとどまります。

しかし、私はオリジナルを移動したくないので、クローンしてクローンをドロップします。

私はクローンを呼び出して、ドロップ機能でappendToを追加しようとしましたが、これは＃dropzone-panelの最後に追加します。

私は何をする必要があり、クローンしてカーソル位置にドロップする必要がありますか？

Answer 1

私はdraggableをヘルパーオプションで設定してから、ドロップブルをacceptオプションで設定します。

$(function() { 
    $(".draggable").draggable({ 
    helper: 'clone', 
    grid: [ 20, 20 ], 
    appendTo: ".droppable" 
    }); 
    $(".droppable").droppable({ 
    accept: ".draggable", 
    drop: function(e, ui) { 
     var pos = ui.position; 
     var $obj = ui.helper.clone(); 
     $obj.css({ 
     position: 'absolute', 
     top: pos.top + "px", 
     left: pos.left + "px" 
     }); 
     $obj.appendTo(".droppable"); 
    } 
    }); 
}); 

あなたは追加要素の絶対位置が維持されることを保証するためにposition: relative;を持って本部にあなたのドロップ可をラップするためにCSSを利用するようになるでしょう。これは、次のようになります。