HTML5之拖拽API

来源：互联网发布：iphone 桌面软件管理编辑：程序博客网时间：2024/06/14 05:03

draggable属性
如果网页元素的draggable属性为true，那么这个元素就是可以拖动的。
拖拽过程会出发很多事件，主要有：
1. dragstart （被拖放的元素）开始拖放操作
2. drag （被拖放的元素）拖放过程中
3. dragenter （拖放过程中鼠标经过的元素）被拖放的元素开始进入本元素的范围内
4. dragover （拖放过程中鼠标经过的元素）被拖放的元素正在本元素范围内移动
5. dragleave （拖放过程中鼠标经过的元素）被拖放的元素离开本元素的范围
6. drop （拖放的目标元素）有其他元素被拖放到了本元素中
7. dragend （拖放的目标元素）拖放操作结束

dataTransfer 对象
dataTransfer对象允许在其上存储数据，这使得在被拖动元素与目标元素之间传送信息成为可能。
dataTransfer对象的属性
dropEffect
拖放的操作类型，决定了浏览器如何显示鼠标形状，可能的值为copy、move、link和none
effectAllowed
指定所允许的操作，可能的值为copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默认值，等同于all，即允许一切操作）。
types
储存在DataTransfer对象的数据的类型
dataTransfer对象的方法
setData(format, data)
在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型，比如text、url、text/html、text/plain等。
data= event.dataTransfer;
如果把”data.setData(“text/plain”, “Hello World.”)”改为”data.setData(“text/plain”, this.id)”，把被拖动元素的id当成了参数，所以携带的数据就是被拖动元素中的数据了，因此浏览器在使用getData()方法读取数据时会自动读取该元素中的数据。
getData(format)
从dataTransfer对象取出数据
clearData(format)
清除dataTransfer对象所储存的数据。如果指定了format参数，则只清除该格式的数据，否则清除所有数据。
setDragImage(imgElement, x , y)
指定拖动过程中显示的图像。默认情况下，许多浏览器显示一个被拖动元素的半透明版本。参数imgElement必须是一个图像元素，而不是指向图像的路径，参数x和y表示图像相对于鼠标的位置。

在我刚开始学习时，我不明白dataTransfer对象是如何来的，仔细琢磨了一下，确认其是拖动的事件的一个属性。

拖动过程中，回调函数接受的事件参数，有一个dataTransfer属性。它指向一个对象，包含了与拖动相关的各种信息
draggableElement.addEventListener(‘dragstart’, function(event) {
event.dataTransfer.setData(‘text’, ‘Hello World!’);
});
总结（img1是被拖动的元素,des1是目标元素，存放拖放元素）

1.设置页面属性，不执行默认处理（拒绝被拖放），否则拖放处理也不能被实现。因为页面是先于其他元素接受拖放的，如果页面上拒绝拖放，则页面上其他元素就都不能接受拖放了。
这里写图片描述
2.为被拖动元素绑定dragstart事件
3.dragstart事件的回调函数中，将信息存放在dataTransfer中。拖动元素为setData(“text/plain”, this.id);
setData中的第二个参数，可以为任何内容。

4.针对要放置的目标元素，必须要在dragover或dragend事件中调用”event.preventDefault”方法，
因为默认情况，目标元素是不接受元素的，为了将元素拖动到其中，必须阻止其默认操作
这里写图片描述
5.绑定drop事件，在目标元素的drop事件中关闭默认处理
6.在drop事件中，利用setData读取dataTransfer中的信息，并加到目标元素中

附上自己写的一个demo.

<!doctype html><html lang="en">    <head>        <meta charset="UTF-8">        <meta name="Generator" content="EditPlus®">        <meta name="Author" content="Yvette Lau">        <meta name="Keywords" content="关键字">        <meta name="Description" content="描述">        <title>Document</title>        <style>            *{                margin:0px;                padding:0px;                font-size:24px;                font-weight:600;            }            .content{                background-color:rgba(87,255,87,0.4);                padding:40px ;                width:320px;                border-radius:10px;                margin:20px;                height:300px;                float:left;            }               #dest1{                clear:both;            }            .destination{                               background-color:rgba(255,177,226,0.3);                padding:40px ;                width:320px;                height:300px;                border-radius:10px;                margin:20px;                float:left;            }        </style>    </head>    <body>        <div class = "content" id = "source1">            <img id = "dream" src = "img/dream.jpg" width = "300px" height = "250px" alt = "九寨沟" draggable = "true"/>        </div>        <div class = "content" id = "source2">            <img id = "relax" src = "img/13.jpg" width = "300px"  height = "250px" alt = "休闲" draggable = "true"/>        </div>        <div id = "dest1" class = "destination">        </div>        <div id = "dest2" class = "destination">        </div>    </body></html>

JS部分

<script type = "text/javascript">    window.onload = function(){        var source1 = document.getElementById("source1");        var source2 = document.getElementById("source2");        var img1 = document.getElementById("dream");        var img2 = document.getElementById("relax");        var label1 = document.getElementById("label");        var label2 = document.getElementById("label2");        var dest1 = document.getElementById("dest1");        var dest2 = document.getElementById("dest2");        //1.设置页面属性，不执行默认处理（拒绝被拖放）        document.ondragover = function(event){            event.preventDefault();        }        document.ondrop = function(event){            event.preventDefault();        }        //2、为被拖动元素绑定dragstart事件        img1.addEventListener("dragstart", function(event){            var data = event.dataTransfer;                  //3、将信息存放在dataTransfer中。拖动元素为setData("text/plain", this.id);            data.setData("text", this.id);        }, "false");        //4、针对要放置的目标元素，必须要在dragover或dragend事件中调用"event.preventDefault"方法，        //因为默认情况，目标元素是不接受元素的，为了将元素拖动到其中，必须阻止其默认操作        dest1.addEventListener("dragend" , function(event){            event.preventDefault();        }, "false");        //5.绑定drop事件，在目标元素的drop事件中关闭默认处理        dest1.addEventListener("drop", function(event){            event.preventDefault();        //6.在drop事件中，利用setData读取dataTransfer中的信息，并加到目标元素中            var data = event.dataTransfer;            var text = data.getData("text");            this.appendChild(document.getElementById(text));        }, "false");        //设置img2的拖拽        img2.addEventListener("dragstart", function(event){            var data = event.dataTransfer;            data.setData("text", this.id);        }, "false");        dest2.addEventListener("dragend" , function(event){            event.preventDefault();        }, "false");        //设置dest2为放置拖动元素        dest2.addEventListener("drop", function(event){            event.preventDefault();            var data = event.dataTransfer;            var text = data.getData("text");            this.appendChild(document.getElementById(text));        }, "false");                //设置source1为放置拖动元素        source1.addEventListener("dragend" , function(event){            event.preventDefault();        }, "false");        source1.addEventListener("drop", function(event){            event.preventDefault();            var data = event.dataTransfer;            var text = data.getData("text");            this.appendChild(document.getElementById(text));        });        //设置source2为放置拖动元素        source2.addEventListener("dragend" , function(event){            event.preventDefault();        }, "false");        source2.addEventListener("drop", function(event){            event.preventDefault();            var data = event.dataTransfer;            var text = data.getData("text");//text即是id            this.appendChild(document.getElementById(text));        });    };</script>

实现的效果如下：这里写图片描述
上图中的四个框，均可放置拖拽元素，因此图中的两张图片，可以任意拖拽至在四个框中。
由于主要目的是学习拖拽的API，了解实现拖拽API的步骤，因为对于JS中的代码未再做封装。

除以上内容外，拖拽API还包括另一个总要内容，即设定拖放时的视觉效果，这涉及到两个属性：
dropEffect和effectAllowed.
effectAllowed none 不允许拖放元素
effectAllowed属性表示当一个元素被拖动时所允许的视觉效果，一般在ondragstart事件中设定，允许设定的值为none、copy、copyLink、copyMove、link、linkMove、move、all、unintialize。（默认值，等同于all，即允许一切操作）

dropEffect none表示不允许元素拖放进来
dropEffect属性表示实际拖放时的视觉效果，一般在ondragover或ondragenter事件中指定，允许设定的值为none、copy、link、move。

dropEffect属性所表示的实际视觉效果必须在effectAllowed属性所表示的允许的视觉效果范围内。
如果effectAllowed属性设定为none，则不允许拖放元素。
如果不dropEffect属性设定为none，则不允许被拖放到目标元素中。
如果effectAllowed属性设定为all或不设定，则dropEffect属性允许被设定为任何值，并且按指定的视觉效果进行显示。
如果effectAllowed属性设定为具体效果（不为none、all），dropEffect属性也设定了具体视觉效果，则两个具体效果值必须完全相等，否则不允许将被拖放元素拖放到目标元素中。

将上面的JS代码中增加data.effectAllowed = “copy”

/*2、为被拖动元素绑定dragstart事件*/img1.addEventListener("dragstart", function(event){        var data = event.dataTransfer;          /*3、将信息存放在dataTransfer中。拖动元素为setData("text/plain", this.id);*/        data.setData("text", this.id);        data.effectAllowed = "copy";        data.setDragImage(dragIco, 10, 10);}, "false");

在上面的代码中增加如下一段

dest1.addEventListener("dragover",function(event){    event.preventDefault();    var data = event.dataTransfer;    data.dropEffect = "copy";    /*如果dropEffect的属性值和effectAlowed值不相同时，不允许将被拖放元素拖放到目标元素中*/},"false");

则在拖放时，鼠标边上会有一个”+”号。

最后，说一下setDragImage()的用法。
因为setDragImage()的第一个参数必须是一个图像元素，因为插入一个图像dragIcon.

var dragIco = document.createElement('img');//设定图的来源dragIco.src="img/xi.ico";

在dragstart事件的回调函数中，增加一句:

//data是event.dataTransfer对象。data.setDragImage(dragIco, 10, 10);

则，在拖动时的效果如下：
这里写图片描述

图中的小爱心，即是dragIco，替换了原本的半透明图片。

如您也在学习HTML5的初级阶段，希望本文能给您一点启发。

1 0