Question

遇到问题。一旦我将图像放入左侧框中，它就不会显示。这是发生的事情：在我拖动图像之前。 http://i.imgur.com/xIWDD.png 拖动图像后。它没有显示。 http://i.imgur.com/vOOIm.png

chrome上的错误说：

获取文件：/// C：/％22test已删除 angelo.js：42 leftbox.innerHTML = e.dataTransfer.getData（ '文本'）;

这是我的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;
}

Answer 1

似乎对我来说工作正常，我只是猜测你的dropped方法在这个jsfiddle中的样子：http://jsfiddle.net/rgthree/aVrB4/

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

HTML5将文件从一个框拖到另一个框。不正常

1 个答案: