ドラッグ可能なイメージを使ってtextareaにイメージタグをドラッグアンドドロップで書き込む

 ブログに画像を入れるとき、その画像のURLを調べてタグを手書きで入れている。わりとめんどうだ。なのでドラッグアンドドロップを利用して、アップロードされてる画像一覧からイメージをタグで入れられるものを作った。

JSFiddleでのデモ

<textarea name="Body" cols="60" rows="20" ondrop="drop(event, this)" ondragover="allowDrop(event)"></textarea>

<div id="images"></div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData('text/html', ev.target.src);
}

function drop(ev, target) {
ev.preventDefault();
console.log(target.id, ev.target.id)

var data = ev.dataTransfer.getData("text/html");
//alert(data);
var imgTag = "<img class='img' src='" + data + "' />";
var p = target.selectionStart;
var text = target.value;
target.value = text.substr(0, p) + imgTag + text.substr(p);
}
</script>
comment: 0