jQuery UI、ドラッグアンドドロップ、カーソル位置に追加

Question

私はjQuery UIを試しています。私は2つのdivを持っています：1つはドラッグ可能なアイテムで、もう1つはドロップ可能なゾーンです。私はドラッグ可能なアイテムをクローンして、私はそれを私のドロップ可能なdivに追加します。私の問題は、私がカーソルを置いた場所と同じ位置にアイテムを追加する必要があり、今はアイテムがドロップ可能なdivの下部に追加されているということです。何か案は？ （私の壊れた英語のために申し訳ありません）。

私はJavaScript：ほとんどそこ

$(document).ready(function() { 
    $(".block").draggable({ helper: 'clone' }, { grid: [20, 20] }, { revert: "valid" }); 

    $("#dropZone").droppable({ 
     accept: ".block", 
     drop: function (ev, ui) { 
      var droppedTable = $(ui.draggable).clone(); 
      droppedTable.appendTo($(this)); 
     } 
    }); 
}); 

Answer 1

。

$(".block").draggable({ 
    helper:'clone', 
    grid: [20, 20], 
    revert: "invalid" //assume you want invalid here, not valid 
}); 

とドラッグ可能なオブジェクトクローンを作成するui.helper使用します：あなたはドラッグ可能なオブジェクトのための構文を修正する必要があり、それは完璧に動作し、

$('#dropZone').droppable({ 
    accept: '.block', 
    drop: function(event,ui){ 
     var droppedTable = $(ui.helper).clone(); 
     droppedTable.appendTo($(this)); 
    } 
}); 

jsfiddle