1.HTML5拖放:
拖放(drag ,drop)是HTML5标准的组成部分。
2.拖动开始:
ondragstart:调用了一个函数,drag(event),它规定了被拖动的数据。
3.设置拖放数据:
setData():设置被拖放的数据类型和值。
4.放入位置:
ondragover:事件规定在何处放置被拖动的数据。
5.放置:
ondrop:当放置被拖动数据时,会发生drop事件。
实例代码如下:
(1)HTML文件代码如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>拖放</title>
- <style>
- .box{
- width: 400px;
- height: 400px;
- }
-
- #box1{
- background-color: #cccccc;
- float: left;
- }
-
- #box2{
- background-color: aquamarine;
- float: left;
- }
-
- </style>
- <script src="app.js"></script>
-
- </head>
- <body>
-
- <div id="box1" class="box"></div>
- <div id="box2" class="box"></div>
- <img id="img1" src="1.png">
- <div id="msg"></div>
-
- </body>
- </html>
(2)JS文件代码如下:
-
-
-
-
-
- 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.ondragover = function (e) {
- e.preventDefault();
- };
-
- box2Div.ondragover = function (e) {
- e.preventDefault();
- };
-
- img1.ondragstart = function(e){
-
- e.dataTransfer.setData("imgId","img1");
-
- };
-
- 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;
- }
实现效果如下:
。
。
.