HTML5 drag api 的使用

2021-11-24 13:18:35

一、基础概念

拖拽：Drag 释放：Drop

1、拖拽指的是鼠标点击源对象后一直移动对象不松手，一但松手即释放了

2、源对象：指的是我们鼠标点击的一个事物，这里可以是一张图片，一个DIV，一段文本等等

目标对象：指的是我们拖动源对象后移动到一块区域，源对象可以进入这个区域，可以在这个区域上方悬停(未松手)，可以释松手释放将源对象放置此处(已松手)，也可以悬停后离开该区域。

二、拖拽API相关函数

被拖动的源对象可以触发的事件：

1、ondragstart 源对象开始被拖动

2、ondrag 源对象被拖动过程中(鼠标可能在移动也可能未移动)

3、ondragend 源对象被拖动结束

拖动对象进入到目标对象区域可以触发的事件

1、ondragenter 目标对象被源对象拖动着进入

2、ondragover 目标对象被源对象拖动着悬停在上方

3、ondragleave 源对象拖动着离开了目标对象

4、ondrop 源对象拖动着在目标对象上方释放/松手

三、如何在拖动的源对象事件和目标对象事件之间传递数据

HTML5为所有的拖动相关事件提供了一个新的属性

e.dataTransfer 数据传递对象（用于在源对象事件和目标对象事件之间传递数据）

源对象事件中保存数据：

e.dataTransfer.setData(k, v) k和v 都必须是string类型

目标对象上的事件处理中读取数据：

let v = emdataTransfer.getData( k )

四：案例

示例一：实现一个可以随着鼠标拖动而移动的效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin:0;
            position: relative;
        }
        img{
            position:absolute;
        }
    </style>
</head>
<body>
<img id="p3" src="img/p3.png" />
<script>
    p3.οndragstart=function(e){
        console.log(‘事件源p开始拖动‘);
        offsetX= e.offsetX;
        offsetY= e.offsetY;
    }
    p3.οndrag=function(e){
        console.log(‘事件源p拖动中‘);
        var x= e.pageX;
        var y= e.pageY;
        console.log(x+‘-‘+y);
        //drag事件最后一刻，无法读取鼠标的坐标，pageX和pageY都变为0
        if(x==0 && y==0){
            return; //不处理拖动最后一刻X和Y都为0的情形
        }
        x-=offsetX;
        y-=offsetY;
 
        p3.style.left=x+‘px‘;
        p3.style.top=y+‘px‘;
    }
    p3.οndragend=function(){
        console.log(‘源对象p拖动结束‘);
    }
</script>
</body>
</html>

示例二：模拟电脑中 ”垃圾桶“的效果，总共显示三个div方块，拖动着某个小方块到垃圾桶上方后，小方块从DOM树上删除

提示：删除需要从DOM子节点中删除元素，需要阻止ondragover的默认行为，利用源对象和目标对象的数据传递记录小方块的ID值！！！

注意：ondragover有一个默认行为，那就是当ondragover触发时，ondrop会失效，这个可能是浏览器的版本问题，以后浏览器不断更新可能会解决

注意：img标签，被选中的文字等都是自带可以拖拽的，如果元素是一个DIV，默认是不能拖拽的，所以要给DIV的属性设置draggable="true"开启可拖拽状态

如何阻止默认行为？

ondragover= function(e){  //源对象在悬停在目标对象上时
  e.preventDefault();  //阻止默认行为，使得drop可以触发
    .....
}
ondrop= function(e){  //源对象松手释放在了目标对象中
    .....
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小喵咪喂给大黄鱼</title>
    <style>
        body{
            text-align: center;
        }

        img{
            width: 80px;
            height: 80px;
            border-radius:100%;
        }
        #fish{
            width: 80px;
            height: 80px;
            margin-top: 200px;
            opacity: .2;
            background-color: yellow;
        }
        .cat{
          width: 50px;
          height: 50px;
          background-color: red;
          margin: 10px;
        }
    </style>
</head>
<body>
 <div class="cat" id="cat1" draggable="true" > </div>
 <div class="cat" id="cat2" draggable="true" > </div>
 <div class="cat" id="cat3" draggable="true" > </div>
 <br>
 <div   id="fish"  ></div>
</body>
<script>
    //要想从数据库中删除猫咪，就需要猫咪的图片地址是后台传值过来的，然后循环遍历在页面中，当拖动删除的时候，删除掉数据库中的数据即可；然后刷新页面
    var  cat = document.getElementsByClassName(‘cat‘)//找到所有的猫咪
    for(var i = 0;i<cat.length;i++){
        var catSingle = cat[i];
        catSingle.ondragstart  = function(e){//循环遍历猫咪，当dragstart拖动开始的时候，setData设置他的id到e.dataTransfer中
            console.log(‘e.dataTransfer‘,e.dataTransfer)
            e.dataTransfer.setData(‘catId‘,this.id);
            console.log(‘e.dataTransfer‘,e.dataTransfer)
        }
    }
    fish.ondragenter = function(){//当如到鱼种时候，让鱼的透明度为1；
        console.log(‘已经拖入‘)
        fish.style.opacity =‘1‘;
    }
    fish.ondragleave = function () {//拖动离开鱼的时候
        console.log(‘拖动离开‘);
        fish.style.opacity =‘.2‘;
    }
    fish.ondragover = function (e) {//拖动悬浮在鱼上
        e.preventDefault()
    }
    fish.ondrop = function(e){//拖动放开时候；获取拖动开始时候设置的数据；然后从dom结构中移除；
        console.log(‘放开拖动‘)
        fish.style.opacity = ‘.2‘
        var id = e.dataTransfer.getData(‘catId‘)
        console.log(id)
        var dragId = document.getElementById(id);
        dragId.parentNode.removeChild(dragId)
    }

</script>
</html>

示例二：将本地图片图拖动放置到浏览器中指定区域显示

相关函数

div.ondrop = function(e){

var f = e.dataTransfer.files[0];      //找到拖放的文件

var fr = new FileReader();        //创建文件读取器

fr.readAsURLData(f);         //读取文件内容

fr.onload = function(){       //读取完成

img.src = fr.result;        //使用读取到的数据

}

 }

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    #container {
      border: 1px solid #aaa;
      border-radius: 3px;
      padding: 10px;
      margin: 10px;
      min-height: 400px;
    }
  </style>
</head>
<body>
 
  <h3>拖动照片到下方方框区域</h3>
  <div id="container"></div>
 
  <script>
    //监听document的drop事件——取消其默认行为：在新窗口中打开图片
    document.ondragover = function(e){
      e.preventDefault(); //使得drop事件可以触发
    }
    document.ondrop = function(e){
      e.preventDefault(); //阻止在新窗口中打开图片，否则仍然会执行下载操作！！！
    }
 
    //监听div#container的drop事件，设法读取到释放的图片数据，显示出来
    container.ondragover = function(e){
      e.preventDefault();
    }
    container.ondrop = function(e){
      console.log(‘客户端拖动着一张图片释放了...‘)
      //当前的目标对象读取拖放源对象存储的数据
      //console.log(e.dataTransfer); //显示有问题
      //console.log(e.dataTransfer.files.length); //拖进来的图片的数量
      var f0 = e.dataTransfer.files[0];
      //console.log(f0); //文件对象 File
 
      //从文件对象中读取数据
      var fr = new FileReader();
      //fr.readAsText(f0); //从文件中读取文本字符串
      fr.readAsDataURL(f0); //从文件中读取URL数据
      fr.onload = function(){
        console.log(‘读取文件完成‘)
        console.log(fr.result);
        var img = new Image();
        img.src = fr.result; //URL数据
        container.appendChild(img);
      }
    }
 
  </script>
</body>
</html>

HTML5 drag api 的使用

码农公寓

相关文章