JavaScript:拖放到 TextArea 上时我拖动的图像消失了

Question

我搜索过 SO 但没有找到其他帖子讨论我正在处理的相同特定问题。我找到了几篇关于将图像放在其他图像之上时图像消失的帖子，但我还没有找到关于将图像放在空文本区域时图像消失的帖子。

谁能帮我理解为什么我的图片消失了？

(注意:我的 fiddle 不像我在桌面上那样工作；不确定我遗漏了什么；目前，当用户将图像拖到 textarea 上时，会显示 url；另外，我的添加新单元格按钮不起作用；我将我正在使用的脚本添加到“外部资源”部分)

这是我的 fiddle : https://jsfiddle.net/m52crpxa/5/

Answer 1

当然，当您将图片拖到征税区域时，它会消失，而在文本区域中，您将看到所拖图片的 url(在某些浏览器中，图片将在新标签页中打开)。

如果你想在拖动的地方显示图像，把你的透明背景的taxtarea放在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>