javascript - JS ドラッグ アンド ドロップ画像 URL

Question

こんにちは、ブログ記事に画像を挿入できるように画像アップローダーを構築しています。すべての画像アップロードを行うフォームがあり、データベースに保存された URL を介して記事作成ページに画像を表示しています。私がやろうとしているのは、ページから画像を選択するためのドラッグ アンド ドロップを作成し、その画像の URL をオンドロップして、データベースに保存し、URL を記事テーブルに保存できるようにすることです。したがって、ドロップボックスにドロップされたときの画像のURLが必要なので、記事テーブルのデータベースにURLを保存できません。これが私のコードです。事前に助けてくれてありがとう！

PHP/HTML

$sql = "SELECT * FROM images";
    $i = 0;

    if($data = query($sql)) {

        while($image = mysqli_fetch_array($data)) {
        ?>
        <div class="layout-column four">
            <img id="drag<?php echo $i++ ?>" src="<?php echo $image['file_name']?>" alt="<?php echo $image['description'] ?>" ondragstart="drag(event)">
        </div>
        <?php

    }

<div id="drop" class="layout-column twelve" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

ジャバスクリプト

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

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

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));

var drop = document.getElementById('drop');
document.write(drop);
}