【发布时间】：2016-04-21 03:54:18
【问题描述】：
我一直在尝试学习的拖放示例出现错误，我无法弄清楚为什么此错误不断出现。
这是我的 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 中，我已经用几种方法重写了它，并在 google 上查找，但仍然无法弄清楚。我认为 console.log 方法可以帮助我确定发生了什么，但它们确实没有帮助。
【问题讨论】：
-
您好，请问您的错误是什么？什么样的错误？或者您使用的是哪个浏览器？
-
SCRIPT65535：对方法或属性访问的意外调用。这是我在 12 个开发者工具的调试器上得到的。互联网探索 11.
-
其实我没有用 IE，但是你的代码在 Chrome 和 firefox 上运行良好……我做了一个代码笔codepen.io/rgoyard/pen/YqvMdq?editors=1000
-
嗯...那么也许与浏览器对该代码的支持有关？
-
实际上，我使用 addEventListener 重写了您的代码：codepen.io/rgoyard/pen/dMKLaY 在 IE 上试一试...并让我知道它是否有效。我认为您的问题来自 IE 在使用 on"Event" 属性时将事件传递给处理函数的方式，我更喜欢使用 addEventListener
标签： javascript html drag-and-drop