HTML5 拖放API

在HTML 5 之前可以使用mousedown、mousemove、mouseup来实现拖放操作，但着只支持在浏览器内部的拖放，而在HTML 5中，支持浏览器与其他应用程序之间的数据相互拖动
一、实现拖放的步骤

将想要拖放的对象元素的draggable属性设为true(draggable = “true”),这样才能将该元素进行拖放；另外，img元素与a元素(必须指定href)默认允许拖放
编写与拖放有关的事件处理代码

事件                  产生事件的元素                 描述
dragstart            被拖放的元素                 开始拖放操作
drag                 被拖放的元素                 拖放过程中
dragenter           被拖放过程中鼠标经过的元素       被拖放的元素开始进入本元素的范围内
dragover            被拖放过程中鼠标经过的元素       被拖放的元素正在本元素范围内移动
dragleave           被拖放过程中鼠标经过的元素       被拖放的元素离开本元素的范围
drop                拖放的目标元素             有其他的元素被拖放到了本元素中
dragend             被拖放的对象元素                拖放操作结束

示例：有一个显示”请拖放”文字的div元素，可以把它拖放到位于它下部的div元素中，每次拖放时，在下部的div元素中会追加一次”你好”文字

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>简单拖放示例</title>
 </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>
<script>
function init(){
    var source = document.getElementById("dragme");
    var dest = document.getElementById("text");
    //1.拖放开始
    source.addEventListener("dragstart",function(e){
        //向datatransfer对象追加数据
        var dt = e.dataTransfer;
        dt.effectAllowed = 'all';
        //2.拖动元素为dt.setData("text/plain",this.id);
        dt.setData("text/plain","您好");
    },false);
    //3.dragend 拖放结束
    dest.addEventListener("dragend",function(e){
        //不执行默认处理(拒绝被拖放)
        e.preventDefault();
    },false);
    //4.drop 被拖放
    dest.addEventListener("drop",function(e){
        //从dataTransfer对象取得数据
        var dt = e.dataTransfer;
        var text = dt.getData("text/plain");
        dest.textContent += text;
        //5.不执行默认处理(拒绝被拖放)
        e.preventDefault();
        //停止时间传播
        e.stopPropagation();
    },false);
    //6.设置页面属性 不执行默认处理(拒绝被拖放)
    document.ondragover = function(e){
        e.preventDefault();
    }
    document.ondrop = function(e){
        e.preventDefault();
    }
}
</script>
 </body>
</html>

运行结果如下：
这里写图片描述
二、知识点解释

开始拖动(dragstart事件发生)时，把要拖动的数据存入DataTransfer对象(setData()方法)。DataTransfer对象专门用来存放拖放时要携带的数据，可以被设置为拖动事件对象的dataTransfer属性，setData(携带数据的数据种类字符串(只能是”text/plain”或”text/html”的表示MIME类型的文字)，携带的数据)
现支持拖动处理的MIME的类型为一下几种：
text/plain：文本文字
text/html：HTML文字
text/xml：XML文字
text/uri-list：URL列表，每个URL为一行
如果把”dt.setData(“text/plain”,”你好”)；”改为”dt.setData(“text/plain”,this.id);”,因为把被拖到元素的id当成了参数，所携带的数据就是被拖动元素中的数据了，因为浏览器在使用getData()方法读取数据时会自动读取该元素中的数据
针对拖放的目标元素，必须在dragend或dragover事件内调用”事件对象.preventDefault()”方法，因为在默认情况下，拖放的目标元素是不允许接受元素的，为了把元素拖放到其中，必须把默认处理给关闭
目标元素接受到被拖放的元素后，执行getData()方法从DataTransfer里获取数据，getData()方法的参数为setData()方法中指定的数据种类
要实现拖放过程，必须在目标元素的drop事件中关闭默认处理(拒绝被拖放),否则目标元素不能接受被拖放的元素
要实现拖放过程，还必须设定整个页面为不执行默认处理(拒绝被拖放),否则拖放处理也不能被实现。因为页面是先于其他元素接受拖放的，如果页面拒绝拖放，那么页面上其他元素就都不接受拖放了
要使元素可以被拖放，首先必须把该元素的draggable属性设为true为了在所有支持拖放API的浏览器中都能正常运行，需要制定”-webkit-user-drag:element”

猜你喜欢