HTML5学习笔记之拖放

来源：互联网发布：秋雨捐书知乎编辑：程序博客网时间：2024/05/01 16:45

HTML5学习笔记之拖放

对于HTML5，拖放是一个标准的一部分，任何元素都是可以被拖放的。

HTML5的拖放功能是通过JS来实现的，在通过对标签元素的获取，在JS中通过对需要拖放的位置调用函数ondragover，禁止浏览器的默认事件，设置被拖放元素的id，调用函数实现拖放。

<span style="white-space: pre;"></span><pre name="code" class="html">//demo01.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>拖放</title>    <style>        .box{            width: 400px;            height: 400px;        }        #div01{            float: left;            background-color: aquamarine;        }        #div02 {            float: left;            background-color: deeppink;        }    </style>    <script src="Demo01.js"></script></head><body>    <div id="div01" class="box"></div>    <div id="div02" class="box"></div>    <img src="img01.jpg" id="img01">    <div id="msg" style="clear: both;"></div></body></html>

相关JS代码：

<pre name="code" class="javascript">//demo01.js

var div01,msgDiv,img01;window.onload = function(){    div01 = document.getElementById("div01");    div02 = document.getElementById("div02");    msgDiv = document.getElementById("msg");    img01 = document.getElementById("img01");    div01.ondragover = function(e){        e.preventDefault();    }    div02.ondragover = function(e){        e.preventDefault();    }    img01.ondragstart = function(e){        e.dataTransfer.setData("imgId","img01");    }    div01.ondrop = dropImghandler;    div02.ondrop = dropImghandler;}function dropImghandler(e){    showObj(e);    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;}

浏览器执行结果：

0 0