我在拖拽示例中遇到错误,我一直试图从中学习,我无法弄清楚为什么这个错误会不断出现。
这是我的HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Week 3 Drag and Drop</title>
<link rel="stylesheet" type="text/css" href="Week3DragAndDropCSS.css">
<script src="Week3DragAndDropJS.js"></script>
</head>
<body>
<header>
<h1>Week 3 Drag and Drop</h1>
</header>
<div id="trashCan" ondragover="dragElementOver(event)"
ondrop="drop(event)"></div>
<div id="trash1" draggable="true" ondragstart="startDrag
(event)">Im Trash</div>
<footer>
</footer>
</body>
</html>
这是我的CSS:
header{
}
body{
}
footer{
}
#trashCan {
height:200px;
width:200px;
background-image: url(trash.png);
background-repeat:no-repeat;
background-size:contain;
}
#trash1{
height:200px;
width:200px;
background: red;
text-align: center;
}
然后是JavaScript:
function startDrag(e){
console.log("drag event started.");
e.dataTransfer.setData('Color', e.target.getAttribute('id'));
}
function dragElementOver(e){
e.preventDefault();
console.log("You entered into the drop zone.");
}
function drop(e){
var data = e.dataTransfer.getData("Color")
console.log("You have dropped the trash into the trash can " + data);
}
部分是错误发生在e.dataTransfer.setData部分的javascript中我已经用几种方式重写了它并在谷歌上查找并且仍然无法弄明白。我认为console.log方法可以帮助我确定最新情况但是他们确实没有帮助。
答案 0 :(得分:2)
显然是IE错误HTML5 Drag&Drop issue in Internet Explorer (dataTransfer property access not possible)
您应该在代码中将“颜色”替换为“文字”
e.dataTransfer.setData('text', e.target.getAttribute('id'));
然后:
var data = e.dataTransfer.getData("text")
我的坏!没看好文档!