<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
<script>
function drag1(ev){
//dataTransfer.setData() 方法设置被拖数据的数据类型和值,也就是设置对象ev的id为Text类型并等待getData()方法的调用
ev.dataTransfer.setData("Text",ev.target.id);
}
function allowDrop(ev){
//调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
ev.preventDefault();
}
function drop(ev){
ev.preventDefault();
//通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
var data=ev.dataTransfer.getData("Text");
//通过img元素的id--data来获得img元素并放置于div元素中
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" style="border: 1px red solid;width: 300px;height: 300px;"οndragοver="allowDrop(event)" οndrοp="drop(event)"></div>
<img id="img1" src="img/3.gif" style="width: auto; height: 100px;" draggable="true"
οndragstart="drag1(event)"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
<script>
function allowDrop(ev){
//调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
ev.preventDefault();
}
function drop(ev){
ev.preventDefault();
//通过img元素的id--img1来获得img元素并放置于div元素中
ev.target.appendChild(document.getElementById('img1'));
}
</script>
</head>
<body>
<div id="div1" style="border: 1px red solid;width: 300px;height: 300px;"οndragοver="allowDrop(event)" οndrοp="drop(event)"></div>
<img id="img1" src="img/3.gif" style="width: auto; height: 100px;" draggable="true"
/>
</body>
</html>
以上两种方法均可以实现拖放，但是前者的拖放有数据交互，可以使拖放更有意义和价值。
1805
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
