有问题。一旦我将图像放入左侧框中，它就不会显示。 这是发生了什么: 在我拖动图像之前。 http://i.imgur.com/xIWDD.png 拖动图像后。它不显示。 http://i.imgur.com/vOOIm.png
chrome 上的错误是:
GET file:///C:/%22test 掉线 angelo.js:42 leftbox.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，或者只使用相对路径。
关于javascript - HTML5 将文件从一个框拖到另一个框。不能正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8884091/