javascript拖放程序报错
代码如下:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>拖放文件</title><styl...
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放文件</title>
<style>
body{
background-color: #ddd;;font-family: arial,verdana,sans-serif;
}
#drop1{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: white;
}
#drag1{
width: 50px;
height: 50px;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault() ;
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id); //设置获取事件元素的ID格式为text
}
function drop(ev) {
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
window.onload = function () {
var dragged = document.getElementById("drag1");
var drophere =document.getElementById("drop1");
dragged.ondragstart = drag(ev);
drophere.ondrgvoer = allowDrop(ev);
drophere.ondrop=drop(ev);
}
</script>
</head>
<body>
<div id="drop1"></div>
<p>请把这张图片拖入那个框中:</p>
<img src="opponent.jpg" draggable="true" id="drag1"/>
</body>
</html>
运行这个程序后查看报错说无法setData无法读取到数据,而且Chrome和ie都运行不了，只有firefox可以运行，但是把window.onload去掉直接在标签添加方法又可以运行。我照着案例弄的感觉不太会有错误，是不是我哪里搞错了，我反复和书对照了几次 展开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放文件</title>
<style>
body{
background-color: #ddd;;font-family: arial,verdana,sans-serif;
}
#drop1{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: white;
}
#drag1{
width: 50px;
height: 50px;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault() ;
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id); //设置获取事件元素的ID格式为text
}
function drop(ev) {
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
window.onload = function () {
var dragged = document.getElementById("drag1");
var drophere =document.getElementById("drop1");
dragged.ondragstart = drag(ev);
drophere.ondrgvoer = allowDrop(ev);
drophere.ondrop=drop(ev);
}
</script>
</head>
<body>
<div id="drop1"></div>
<p>请把这张图片拖入那个框中:</p>
<img src="opponent.jpg" draggable="true" id="drag1"/>
</body>
</html>
运行这个程序后查看报错说无法setData无法读取到数据,而且Chrome和ie都运行不了，只有firefox可以运行，但是把window.onload去掉直接在标签添加方法又可以运行。我照着案例弄的感觉不太会有错误，是不是我哪里搞错了，我反复和书对照了几次 展开
4个回答
展开全部
<script>
window.onload = function() {
var dragged = document.getElementById("drag1");
var drophere = document.getElementById("drop1");
dragged.ondragstart = function(ev){
ev.dataTransfer.setData("Text", ev.target.id);
};
drophere.ondragover = function(ev){
ev.preventDefault();
};
drophere.ondrop = function(ev){
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
};
}
</script>
问题有两点：
1、首先你的dragover写错了。。。
2、你调用函数的时候还没有event事件呢，那你的ev参数是空的。自然没有效果
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这样改改试试看。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放文件</title>
<style>
body{
background-color: #ddd;;font-family: arial,verdana,sans-serif;
}
#drop1{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: white;
}
#drag1{
width: 50px;
height: 50px;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault() ;
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id); //设置获取事件元素的ID格式为text
}
function drop(ev) {
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
window.onload = function () {
var dragged = document.getElementById("drag1");
var drophere =document.getElementById("drop1");
dragged.ondragstart = drag;
drophere.ondragover = allowDrop;
drophere.ondrop=drop;
}
</script>
</head>
<body>
<div id="drop1"></div>
<p>请把这张图片拖入那个框中:</p>
<img src="opponent.jpg" draggable="true" id="drag1"/>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你把script标签放在</body>后面试试。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
window.onload = function () {
drag1.ondragstart = function(ev){ ev = ev || window.event; drag(ev) };
drop1.ondragover = function(ev){ ev = ev || window.event; allowDrop(ev) };
drop1.ondrop = function(ev){ ev = ev || window.event; drop(ev) };
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
