HTML5 拖放（Drag 和 Drop）
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放
1.设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true">
2.拖动什么 - ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么。
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
3.放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
4.进行放置 - ondrop
当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放
1.设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true">
2.拖动什么 - ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么。
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
3.放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
4.进行放置 - ondrop
当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
例：HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放</title>
<script src="JS/tuofang.js"></script>
</head>
<style>
.box{
400px;
height: 400px;
}
#box1{
background-color: #ff2;
}
</style>
<body>
<div id="box1" class="box"></div>
<img id="img1" src="img/img01.png" alt="" width="350px">
<div id="msg"></div><!--打印拖放信息的DIV-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放</title>
<script src="JS/tuofang.js"></script>
</head>
<style>
.box{
400px;
height: 400px;
}
#box1{
background-color: #ff2;
}
</style>
<body>
<div id="box1" class="box"></div>
<img id="img1" src="img/img01.png" alt="" width="350px">
<div id="msg"></div><!--打印拖放信息的DIV-->
</body>
</html>
JS
var box1Div,msgDiv,img1;
var box1Div,msgDiv,img1;
window.onload = function () {
box1Div=document.getElementById("box1");
msgDiv=document.getElementById("msg");
img1=document.getElementById("img1");
// 监听拖拽事件
// box1Div.ondragenter=function (e) {
// showObj(e);}
//图片被拖动时,前面是设置的，后面是本来的id
img1.ondragstart=function (e) {
e.dataTransfer.setData("imgId","img1")
}
// 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
box1Div.ondragover=function (e) {
e.preventDefault();
box1Div=document.getElementById("box1");
msgDiv=document.getElementById("msg");
img1=document.getElementById("img1");
// 监听拖拽事件
// box1Div.ondragenter=function (e) {
// showObj(e);}
//图片被拖动时,前面是设置的，后面是本来的id
img1.ondragstart=function (e) {
e.dataTransfer.setData("imgId","img1")
}
// 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
box1Div.ondragover=function (e) {
e.preventDefault();
}
//打印对象e中的信息
box1Div.ondrop=function (e) {
showObj(e.dataTransfer);
e.preventDefault();
var img=document.getElementById(e.dataTransfer.getData("imgId"));
box1Div.appendChild(img);
}
}
function showObj(obj) {
var s="";
for (var k in obj){
s+=k+":"+obj[k]+"<br/>"
}
msgDiv.innerHTML=s;
<!--遍历当前是不是它的信息-->
}
//打印对象e中的信息
box1Div.ondrop=function (e) {
showObj(e.dataTransfer);
e.preventDefault();
var img=document.getElementById(e.dataTransfer.getData("imgId"));
box1Div.appendChild(img);
}
}
function showObj(obj) {
var s="";
for (var k in obj){
s+=k+":"+obj[k]+"<br/>"
}
msgDiv.innerHTML=s;
<!--遍历当前是不是它的信息-->
}
例实现两个地方的拖放：HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放</title>
<script src="JS/tuofang.js"></script>
</head>
<style>
.box{
400px;
height: 400px;
}
#box1{
float: left;
background-color: #ff2;
}
#box2{
float: left;
background-color: #aaaa22;
}
</style>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img id="img1" src="img/img01.png" alt="" width="350px">
<div id="msg"></div><!--打印拖放信息的DIV-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放</title>
<script src="JS/tuofang.js"></script>
</head>
<style>
.box{
400px;
height: 400px;
}
#box1{
float: left;
background-color: #ff2;
}
#box2{
float: left;
background-color: #aaaa22;
}
</style>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img id="img1" src="img/img01.png" alt="" width="350px">
<div id="msg"></div><!--打印拖放信息的DIV-->
</body>
</html>
JS
var box1Div,box2Div,msgDiv,img1;
var box1Div,box2Div,msgDiv,img1;
window.onload = function () {
box1Div=document.getElementById("box1");
box2Div=document.getElementById("box2");
msgDiv=document.getElementById("msg");
img1=document.getElementById("img1");
// 监听拖拽事件
// box1Div.ondragenter=function (e) {
// showObj(e);}
//图片被拖动时,前面是设置的，后面是本来的id
img1.ondragstart=function (e) {
e.dataTransfer.setData("imgId","img1")
}
// 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
box1Div.ondragover=function (e) {
e.preventDefault();
box1Div=document.getElementById("box1");
box2Div=document.getElementById("box2");
msgDiv=document.getElementById("msg");
img1=document.getElementById("img1");
// 监听拖拽事件
// box1Div.ondragenter=function (e) {
// showObj(e);}
//图片被拖动时,前面是设置的，后面是本来的id
img1.ondragstart=function (e) {
e.dataTransfer.setData("imgId","img1")
}
// 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
box1Div.ondragover=function (e) {
e.preventDefault();
}
box2Div.ondragover=function (e) {
e.preventDefault();
box2Div.ondragover=function (e) {
e.preventDefault();
}
//打印对象e中的信息
box1Div.ondrop=dropImghandler;
box2Div.ondrop=dropImghandler;
}
function dropImghandler(e) {
showObj(e.dataTransfer);
e.preventDefault();
var img=document.getElementById(e.dataTransfer.getData("imgId"));
e.target.appendChild(img);
}
function showObj(obj) {
var s="";
for (var k in obj){
s+=k+":"+obj[k]+"<br/>"
}
msgDiv.innerHTML=s;
<!--遍历当前是不是它的信息-->
}
//打印对象e中的信息
box1Div.ondrop=dropImghandler;
box2Div.ondrop=dropImghandler;
}
function dropImghandler(e) {
showObj(e.dataTransfer);
e.preventDefault();
var img=document.getElementById(e.dataTransfer.getData("imgId"));
e.target.appendChild(img);
}
function showObj(obj) {
var s="";
for (var k in obj){
s+=k+":"+obj[k]+"<br/>"
}
msgDiv.innerHTML=s;
<!--遍历当前是不是它的信息-->
}