HTML5中的拖拽与拖放(drag&&drop)

1.drag

当拖动某个元素时，将会依次触发下列事件：

1）dragstart：按下鼠标键并开始移动鼠标时，会触发该事件

2）drag：dragstart触发后，随即便触发drag事件，而且在元素被拖动期间，该事件一直被触发

3）dragend：拖动停止时触发该事件

上面的事件的对象是要拖动的元素

2.drop

当某元素被拖动到某个有效的放置目标时，将会依次触发下列事件：

1）dragenter：只要有元素被拖动到该有效放置目标中，便触发该事件

2）dragover：dragenter后，随即触发dragover，且只要元素还在该有效放置目标中，该事件就会一直被触发

3）dragleave/drop：如果元素被拖出了该有效的放置目标的范围，便会触发dragleave事件；反之，如果元素被放置在该有效的放置目标范围内就会触发drop事件而不会触发dragleave事件；

上面的对象是作为放置目标的元素

3.dataTransfer对象

event的dataTransfer对象属性可以在拖放操作的同时实现数据交换。

dateTransfer中最重要的是setData()和getData()方法。getData可以取得由setData保存的值。

setData有两个参数，第一个是保存的数据的类型，第二个是要保存的数据；

getData只一个参数，是setData的第一个参数。

数据的类型支持所有MIME类型，常用的是text(text/plain)和URL(text/uri-list)类型。

eg：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>drag&&drop</title>
</head>
<style>
    #testDiv{
        border: 2px;
        border-style: solid;
        border-color: black;
        width:200px;
        height:200px;
    }
    .testImg{
        width:100px;
        height:100px;
    }
</style>
<body>
   <img id="img1" class="testImg"src="jhjh.png"/>
    <img id="img2" class="testImg"src="jhjh.png"/>
    <div id="testDiv"></div>
    <script>
        var img1=document.getElementById("img1");
        var img2=document.getElementById("img2");
        var testDiv=document.getElementById("testDiv");
        img1.addEventListener("dragstart",function(e){
            e.dataTransfer.setData("Text",e.target.id);
            console.log("ondragstart");
        })
        img2.addEventListener("dragstart",function(e){
            e.dataTransfer.setData("Text",e.target.id);
            console.log("ondragstart");
        })
        testDiv.addEventListener("dragover",function(e){
            e.preventDefault();
            console.log("ondragover");          
        })
        testDiv.addEventListener("drop",function(e){
            var data=e.dataTransfer.getData("Text");
            e.target.appendChild(document.getElementById(data));
            console.log("ondrop");
        })
    </script>
</body>
</html>

在上面的例子中，setData方法被绑定在被拖动的元素的dragstart阶段，而目标放置元素中，dragover事件绑定了event.preventDefault()以阻止dragover事件的默认动作（被拖动的元素回到原来位置），drop事件绑定了getData以获取setDate存储的信息，然后便可以把被拖动的元素添加到放置目标中。

HTML5中的拖拽与拖放(drag&&drop)

猜你喜欢