Question

我在拖拽示例中遇到错误，我一直试图从中学习，我无法弄清楚为什么这个错误会不断出现。

这是我的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方法可以帮助我确定最新情况但是他们确实没有帮助。

Answer 1

显然是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")

我的坏！没看好文档！

意外调用方法或属性访问？

1 个答案: