Internet Explorer 9以降にて、ドラッグ＆ドロップでテキストエリアの任意の位置にテキストを挿入したい

Question

お世話になります。

現在行っている、Webアプリケーション開発にて、
対象の画像をドラッグし、指定のテキストエリア内の任意の位置にドロップすると、専用のテキストが挿入されるといった動作を行いたいと考えています。

chromeでは正しく動作していますが、IEにてドラッグしてきたものをドロップしようとすると、カーソルが禁止アイコンになってしまいドロップできません。

以下、ソースコードを掲載させていただきます。

// 対象の画像に設定したIDを取得する
document.addEventListener("dragstart",function(ev){
ev.dataTransfer.setData("text/plain",ev.target.id);
},false);

//idが"srcfront"のdivにイベントを設定する
var dropzone = document.getElementById('srcfront');

//dragenterイベントをキャンセル
dropzone.addEventListener('dragenter',function(e){
e.preventDefault();
},false);

//dragoverイベントでドラッグオペレーションを設定
dropzone.addEventListener('dragover',function(e){
e.dataTransfer.dropEffect="copy";
},false);

dropzone.addEventListener('drop',function(ev){
var data = ev.dataTransfer.getData("text/plain");
ev.target.textContent = data;

ev.preventDefault();
},false);

先述致しましたが、chromeでは問題なく動作しています。（任意のカーソル位置にドロップできる）
IEでも同じことができればと考えています。

ご教示いただければ幸いです。よろしくお願いいたします。

Answer 1

IEでドラッグアンドドロップに（比較的まともに）対応したのがIE11です。
IE10以下ではまともに使えないと思っていいです。

参考 Can I use - Drag and Drop

Comments

[wakana_]

迅速なご回答いただきありがとうございます。

対象をIE 11にした場合、実装できる方法はあるのでしょうか？

イメージとしては、サイト内のテキストをドラッグ＆ドロップしてテキストエリアに貼ることと、同じ動作を目指しています。

ご教示いただけましたら幸いです。よろしくお願いいたします。

[dupont_kedama]

上記コードは試していないのですが、IE11なら「カーソルが禁止アイコンに」ならないように思いますがいかがでしょうか。
また、開発者ツールでドキュメントモードがEdge(既定)になっているかをご確認ください。

[wakana_]

引き続きご回答いただきありがとうございます。

IE11にて上記のソースを試していますが、カーソルが禁止アイコンになってしまいます。

行っている状況としては、テーブル内の<td>タグをドラッグし、テキストエリアにドロップすると、<td>タグに設定されているIDがドロップされるというものです。

開発者ツールにてドキュメントモードの確認も行いましたが、Edgeとなっておりました。

何度もすみません、よろしくお願いいたします。

[dupont_kedama]

本当にごめんなさい。
デスクトップからのドラッグアンドドロップと勝手に勘違いしていました。
今、手元で試せないので他の方の回答を待ちます。

[wakana_]

ご返信いただきありがとうございます。

とんでもないです。こちらの言葉足らずであったと思います。
ご検証いただきありがとうございます。
＞＞Can I use - Drag and Drop　
もう少し検討して難しそうであればこちらのサイトを参考に仕様変更等も考えられるため、大変助かっております。
ありがとうございました。