JavaScript：我的拖动图像消失时，丢弃到TextArea

我搜索了周围SO，但还没有找到其他职位，谈论我正在处理的具体问题。我发现有几篇文章谈论图像在将图像放在其他图像上时消失，但我没有发现有一种图像在将图像放入空的textareas时消失。JavaScript：我的拖动图像消失时，丢弃到TextArea

任何人都可以帮助我理解为什么我的图像正在消失吗？（注意：我的小提琴没有按照我在桌面上工作的方式工作;不知道我错过了什么;此刻，当用户将图像拖到textarea上时，网址显示出来;另外，我添加新的单元格按钮不能正常工作;我又说，我使用了“外部资源”部分中的脚本）

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

来源

2017-02-14 user123456

我认为（但不知道）数据传递是拖从Windows到浏览器中的文件？例如在选择文件中上传。 –

https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop – user123456

链接页面中的文本区域在哪里？ –

当然，当你拖动图像taxe区将消失，在文本区域中，您将获得拖动图像的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>

来源

2017-02-14 21:25:34

请看这个答案，这样你就没有图像大小问题。 –

谢谢Farzin，感谢您的时间和精力。我相信这会回答这个问题，所以我会将其标记为正确的;然而，正如我上面所说，我决定改变textarea到div。现在，当我放下图像时，它们不会消失，但是图像大小存在问题。（我不打算使用你的代码的原因是因为我不明白发生了什么，w3schools使用的示例代码对我来说更容易理解，所以我使用它们;我只是希望我能理解为什么我的图像不会保留尺寸调整后的尺寸） – user123456

正如我这样说你没有图像尺寸问题，它很容易，一个textarea掩盖了一个图像，但它是不可见的' opcity：0'。你将图像拖到textarea，并将textarea的文本设置为图像src（通过jquery）。 btw感谢接受。 –

JavaScript：我的拖动图像消失时，丢弃到TextArea

回答

相关问题