javascript - 複数のドラッグ 複数の要素を canvas 要素にドロップする

Question

私のプロジェクトの一部は、複数の画像を div 要素からキャンバスにドラッグ アンド ドロップすることです。画像は .svg タイプであり、ライブラリfabric.jsを使用してそれらの画像をレンダリングします。私が直面している問題は、ファイルがキャンバスに複数回ドロップされないことです。

各レベルでのアラートは、drag 関数が 2 回呼び出されているにもかかわらず、関数 drop が 1 回しか呼び出されていないことを示しています。

以下は JavaScript コードの一部です。

var object = new Image();

function allowDrop(ev)
{
    ev.preventDefault();
}

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
    ev.preventDefault();
    var data=document.getElementById(ev.dataTransfer.getData("Text")).getAttribute('src');
    object.src = data.toString();
main();

}

main() は、object.src を使用して画像の URL を取得し、fabric.js ライブラリを使用してレンダリングする関数です。