<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
<style>
#box{
width:300px;
height:180px;
border:1px?solid?#000;
}
#img1{
width:200px;
height:120px;
margin:?20px;
}
</style>
</head>
<body>
<div?id="box"></div>
<img?src="img/6.jpg"?id="img1"?draggable="true">
<script>
window.onload=function(){
var?box=document.getElementById('box'),
img1=document.getElementById('img1');
img1.ondragstart=drag(event);
box.ondragover=allowdrop(event);
box.ondrop=drop(event);
function?allowdrop(ev){
ev.preventDefault();
}
function?drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function?drop(ev){
ev.preventDefault();
var?data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
}
</script>
</body>
</html>當我把ondragstart? ?ondragover? ?ondrop事件放在HTML元素標簽內時,代碼正常運行,但是像上邊放在<script>中時,就會出現(xiàn)錯誤Uncaught TypeError: Cannot read property 'setData' of undefined? 請問各位大神是哪里出了問題,怎么修改?
HTML5 drag and drop 中出現(xiàn)錯誤
sherryliu
2018-02-07 15:21:26