JavaScript：TextAreaにドロップされたときにドラッグされた画像が消える

Question

私はSOを検索しましたが、私が扱っているのと同じ特定の問題に関する他の投稿は見つかりませんでした。私は他の画像の上にそれらを落とすときに消えていく画像についていくつかの記事を見つけましたが、空のテキストエリアに画像を落としたときに消えていく画像については語っていません。

私のイメージが消えている理由を理解できたら助けてくれる人はいますか？

（注：私のフィドルは私のデスクトップ上で動作するようには機能しません;私が紛失していることはわかりませんが、ユーザーがテキストエリアに画像をドラッグすると、私は「外部リソース」セクションを使用していたスクリプト）もちろん

Here is my fiddle:https://jsfiddle.net/m52crpxa/5/

Answer 1

あなたはそれが消え面積をtaxe画像をドラッグして追加、および、追加私の新しいセルボタンが動作しませんテキストエリアにドラッグした画像のURLが表示されます（一部のブラウザでは新しいタブで画像が開きます）。

ドラッグした場所に画像が表示されるようにするには、divに透明な背景を持つタクシーを配置します。

#div1{width: 150px; height:150px; position:relative; border:1px solid;} 
 

 
textarea{ 
 
    position:absolut; 
 
    width:100%; 
 
    height:100%; 
 
    opacity: 0; 
 
    left:0; 
 
    top:0; 
 
} 
 

 
#div1 img{width: 100%;height:100%;}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 

 
<div id="div1"><img /> <textarea></textarea></div> 
 
<img src="https://www.gravatar.com/avatar/087039a00851e75ff483470e3aba89c9?s=48&d=identicon&r=PG" /> 
 
    
 
<script> 
 
    $('textarea').on("drop", function() 
 
    { 
 
     var $this = $(this); 
 
     
 
     setTimeout(function() 
 
     { 
 
      $($this).prev().attr('src', $this.val()); 
 
      $this.parent().css('border', '1px solid'); 
 
     }, 200); 
 
    }); 
 
    $("textarea").bind("dragover", function() 
 
    {   
 
     $(this).parent().css('border', '2px dashed red');   
 
    }); 
 

 
    $('textarea').bind('dragleave', function() 
 
    {   
 
     $(this).parent().css('border', '1px solid'); 
 
    }); 
 
    </script>