HTML5 拖放API的使用

来源：互联网发布：照片怎样发到淘宝客服编辑：程序博客网时间：2024/05/17 01:57

1.实现拖放的步骤

1）将想要拖放的对象元素的draggable属性设为true.这样才能将该元素进行拖放。另外，img元素与a元素(必须指定href)默认允许拖放。

2）编写与拖放有关的事件处理代码。关于拖放存在如下几个事件。

事件

产生事件的元素

描述

dragstart

被拖放的元素

开始拖放操作

drag

被拖放的元素

拖放过程

dragenter

拖放过程中鼠标经过的元素

被拖放的元素开始进入本元素的范围内

dragover

拖放过程中鼠标经过的元素

被拖放的元素正在本元素的范围内移动

dragleave

拖放过程中鼠标经过的元素

被拖放的元素离开本元素的范围

drop

拖放的目标元素

有其他元素被拖放到了本元素中

dragend

拖放的目标元素

拖放操作结束

下面代码清单给出了一个按照上述步骤实现的拖放示例。

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>test</title>    <style>       </style>    <script>function init(){var source = document.getElementById('dragme');var dest = document.getElementById('text');//拖放开始source.addEventListener('dragstart',function(ev){//向dataTransfer对象追加数据var dt = ev.dataTransfer;console.log(dt.types);dt.effectAllowed ="all";dt.setData('aa','你好');},false);//拖放结束dest.addEventListener('dragend',function(ev){//不执行默认处理(拒绝被拖放)ev.preventDefault();},false);//被拖放dest.addEventListener('drop',function(ev){//从DataTransfer对象那里取得数据var dt = ev.dataTransfer;var text = dt.getData('aa');dest.textContent += text;//不执行默认处理(拒绝被拖放)ev.preventDefault();//停止事件传播ev.stopPropagation();ev.target.appendChild(source);},false);}    //页面不执行默认事件document.ondragover = function(e){e.preventDefault();}document.ondrop = function(e){e.preventDefault();}    </script>  </head>  <body onload="init()"><div id="dragme" draggable="true" style="width:200px;border:1px solid gray">请拖放</div><div id="text" style="width:200px;height:200px;border:1px solid gray"></div>  </body></html>

下面把上例代码中的几个知识要点解释一下：

1> 开始拖动(dragstart事件发生)时，把要拖动的数据存入DataTransfer对象(setData()方法)。DataTransfer对象专门用来存放拖放时要携带的数据，他可以被设置为拖动事件对象的dataTransfer属性。setData方法中的第一个参数为携带数据的数据种类的字符串，第二个参数为要携带的数据。

2>针对拖放的目标元素，必须在dragend或dragover事件内调用“事件对象.preventDefault()”方法。因为默认情况下，拖放的目标元素是不允许接受元素的，为了把元素拖放的其中，必须把默认的处理给关闭掉。

3>目标元素接受到被拖放的元素后，执行getData()方法从DataTransfer那里获得数据。getData()方法的参数为setData()方法中指定的数据类型，本例中为“text/plain”。

4>要实现拖放过程，还必须在目标元素的drop事件中关闭默认处理，否则目标元素不能接受被拖放的元素。

5>要实现拖放过程，还必须设定整个页面为不执行默认处理,负责拖放处理也不能被实现。因为页面是先于其他元素接受拖放的，如果页面上拒接拖放，那么页面上其他元素就都不能接受拖放了。