HTML5拖放（drag和drop）

时间：2022-11-19 19:52:30

1. 说说“拖放事件”

拖放事件，即抓取对象以后拖动到另一个位置

有些事件在被拖放的元素上触发，有些在放置目标上触发。在拖动元素时，依次触发dragstart事件、drag事件、dragend事件；当某个元素被拖动到一个有效的放置目标上时，依次触发dragenter事件、dragover事件dragleave或者drop事件。

2. 实现过程

  • 设置元素为可拖放
<img draggable="true">
  • 拖动什么？当元素被拖动时，发生的事件（ondragstart和setData()）

ondragstart属性调用一个函数，drag(event)规定看被拖动的数据，dataTransfer.setData()设置被拖放数据的数据类型和值。

function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);
}
  • 放在何处？ondragover 事件规定在何处放置被拖动的数据
    默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，必须阻止对元素的默认处理方式。因此需要通过ondragover事件中的event.preventDefault()方法
event.preventDefault()
  • 进行放置ondrop
    首先调用preventDefault()来避免浏览器对数据的默认处理；然后通过dataTransfer.getData(“Text”)方法获得被拖数据，被拖数据是被拖元素的id;最后把被拖元素追加到放置元素中。
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

源码：
1.实现拖放

//html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放</title>
<style>
.box{
width: 400px;
height: 400px;
}
#box1{
float: left;
background-color: #cccccc;
}
#box2{
float: left;
background-color: salmon;
}
</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.jpg">
<div id="msg"></div>
</body>
</html>

//js代码app.js
/**
 * Created by hling on 2015/10/19.
 */
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);
    }
}
*/
    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;

}

2.实现两个< div>元素之间拖放图像

<!DOCTYPE html>
<html>
<head>
<title>拖拽</title>
<style type="text/css">
.div{
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script type="text/javascript">
function allowDrop(ev){
 ev.preventDefault();

 }

function drag(ev){
 ev.dataTransfer.setData("Text",ev.target.id);
 }

function drop(ev){
 ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
 ev.target.appendChild(document.getElementById(data));
 }
</script>
</head>
<body>
<div id="div1" class="div" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="1.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="80" height="30">  
</div>
<div id="div2" class="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
标签：

相关文章