更新しました
ここでフィドル：
注：私はフィドルが初めてで、どういうわけかコードをフィドルに統合しましたが、ドラッグドロップは機能していません。
こんにちは、次のようなjqueryのドラッグ可能およびドロップ可能な関数を使用して、ドラッグ、ドロップ、およびクローン機能を実装しました。
$(".dragSigners").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit',
revert: true
});
注:$("#document-reader")はスクロール可能な div です。この div の任意の場所に要素を上から下にドラッグしたい。親 div をスクロールして、div の途中で要素をドラッグできます。そして、ドラッグした場所にくっつくはずです。
$("#document-reader").droppable({
accept: '.dragSigners',
activeClass: "drop-area",
drop: function(e, ui) {
dragEl = ui.helper.clone();
ui.helper.remove();
document_id = dragEl.data("document-id");
signer_id = dragEl.data("signer-id");
stopPosition = dragEl.position();
dragEl.data("signer-id", signer_id);
dragEl.draggable({
helper: 'original',
cursor: 'move',
tolerance: 'fit',
drop: function (event, ui) {
$(ui.draggable).remove();
}
});
// append element to #document-reader
dragEl.addClass("dragMe");
dragEl.removeClass("dragSigners col-sm-6");
dragEl.find("span.closeIt").removeClass("hideIt");
dragEl.appendTo('#document-reader');
// ajax call for updating position to database for future reference
updateDropPosition(dragEl, stopPosition, signer_id, document_id)
}
});
これは、要素を適切にドラッグし、複製してドロップします。
問題
ドロップされた要素が、ドロップした場所とまったく同じ場所にドロップされていません。むしろ、要素をドロップするたびに同じ場所にドロップしています。位置もログに記録しようとしましたが、要素をどこにドロップしても、上と左が同じであることがわかりました。
console.log(dragEl.position())
output: Object { top=-5, left=-5} // [NOTE: it doesn't matter where ever I drop element, It is showing top and left as -5. and it is not showing dropped element in the exact same place where I dropped it]
私のコードの何が問題なのかわかりません。
期待される結果：
次のスクリーンショットをご覧ください。
1) これは現在起こっています (間違った動作)
2) 予想される動作:
