HTML5 拖放API

浅浅的花香味﹌ 2022-05-31 12:51 281阅读 0赞

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

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

事件                  产生事件的元素                 描述
    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>

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

1.  开始拖动(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为一行
2.  如果把”dt.setData(“text/plain”,”你好”)；”改为”dt.setData(“text/plain”,this.id);”,因为把被拖到元素的id当成了参数，所携带的数据就是被拖动元素中的数据了，因为浏览器在使用getData()方法读取数据时会自动读取该元素中的数据
3.  针对拖放的目标元素，必须在dragend或dragover事件内调用”事件对象.preventDefault()”方法，因为在默认情况下，拖放的目标元素是不允许接受元素的，为了把元素拖放到其中，必须把默认处理给关闭
4.  目标元素接受到被拖放的元素后，执行getData()方法从DataTransfer里获取数据，getData()方法的参数为setData()方法中指定的数据种类
5.  要实现拖放过程，必须在目标元素的drop事件中关闭默认处理(拒绝被拖放),否则目标元素不能接受被拖放的元素
6.  要实现拖放过程，还必须设定整个页面为不执行默认处理(拒绝被拖放),否则拖放处理也不能被实现。因为页面是先于其他元素接受拖放的，如果页面拒绝拖放，那么页面上其他元素就都不接受拖放了
7.  要使元素可以被拖放，首先必须把该元素的draggable属性设为true为了在所有支持拖放API的浏览器中都能正常运行，需要制定”-webkit-user-drag:element”

[SouthEast]: /images/20220531/73fda714aa7e4384aa65cfa32f89b1dd.png