HTML5将文件从一个框拖动到另一个框.工作不正常

HTML5 Drag file from one box to another. not working properly

本文关键字：拖动 另一个 不正常 工作 一个 文件 HTML5      更新时间：2023-09-26

遇到问题。一旦我把图片放到左边的框里，它就不会显示了。发生的情况如下：在我拖动图像之前。https://i.stack.imgur.com/C6JSM.png在我拖动图像之后。它不显示。https://i.stack.imgur.com/7Du0c.png

chrome上的错误显示：

得到file:///C:/%22test已丢弃angelo.js:42leftbox.innerHTML=e.dataTransfer.getData（'text'）；

这是我的HTML

 <!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>angelos site</title>
   <link rel="stylesheet" href="main.css">
   <script src="angelo.js"></script>
</head>
<body>
   <section id="leftbox">
      i dare you to drop an image inme.
   </section>
   <section id="rightbox">
      <img id="facepic" src="C:'test'face.png">
   </section>
</body>
</html>

这是我的JS。

function doFirst(){
   mypic=document.getElementById('facepic');//tell js to recognize facepic.
   mypic.addEventListener("dragstart",startDrag,false);//when you start dragging facepic run startDrag function. "dragstart" is keyword in java that recognizes when you start dragging an object.
   leftbox=document.getElementById('leftbox'); //tell js to recognize leftbox.
   leftbox.addEventListener("dragenter",function(e){e.preventDefault();},false);//make same for all browsers.need to override. we arent using this.
   leftbox.addEventListener("dragover",function(e){e.preventDefault();},false);//make same for all browsers.need to override. we arent using this.
   leftbox.addEventListener("drop",dropped,false);//call function dropped.
}
function startDrag(e){
   var code='<img src="C:'test'face.png">';
   e.dataTransfer.setData('Text',code);
}

这是我的CSS

#leftbox{
   float:left;
   width:250px;
   height:250px;
   margin:5px;
   border:3px solid blue;
}
#rightbox{
   float:left;
   width:250px;
   height:250px;
   margin:5px;
   border:3px solid green;
}

对我来说似乎很好，不过，我只是猜测你的dropped方法在这个jsfiddle中是什么样子：http://jsfiddle.net/rgthree/aVrB4/

从上面你可以看到你的JS可能还可以。我猜你的浏览器不喜欢本地链接。对img的src属性尝试file:///c:/test/face.png，或者只使用相对路径。

相关文章：