Html5 拖拽

Html5 拖拽

  1. 概念

    1. 拖拽:通过鼠标操作,将源(img div 一段文本) 对象拖拽至目标对象。
    2. 源对象:指的是我们鼠标点击的一个事物,这里可以是一张图片,一个DIV,一段文本等等。
    3. 目标对象:指的是我们拖动源对象后移动到一块区域,源对象可以进入这个区域,可以在这个区域上方悬停(未松手),可以释松手释放将源对象放置此处(已松手),也可以悬停后离开该区域。
  2. 拖拽技术实现

    1. 原生DOM
    2. 使用jQuery插件(其它第三方插件)
    3. HTML5 中提供的拖拽功能
      • draggable 允许/禁用 拖拽功能。
  3. 拖拽触发事件

    1. 源对象事件
      1. dragstart - 当鼠标开始拖放时被触发
      2. drag - 当鼠标拖放过程中,类似于mousemove
      3. dragend - 当鼠标拖放结束时触发
    2. 目标对象事件
      1. dragenter - 源对象拖动着进入目标对象时
      2. dragover - 源对象停留在目标对象上方时
      3. dragleave - 源对象拖动着离开目标对象时
      4. drop - 源对象拖动着在目标对象上方释放/松开鼠标
  4. 拖动源对象事件 和 目标对象事件中传递数据

    1. 拖动事件新属性 e.dataTransfer
      • 功能:用于在源对象和目标对象的事件间传递数据。
    2. 数据保存
      • e.dataTransfer.setData( k , v ) //k, v 必须都是string类型
    3. 数据读取
      • e.dataTransfer.getData( k )
  5. 拖拽案例

    1. 随鼠标拖动的飞机
      • clientX,clientY 相对于浏览器的偏移值
      • screenX,screenY 相对于显示器的偏移值
      • offsetX,offsetY 相对于源对象的偏移值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖动的飞机</title>
    <style>
        body{
            position:relative;
        }
        #imgPlane{
            position:absolute;
        }
    </style>
</head>
<body>
<h1>拖动的飞机</h1>
<hr>
<img id="imgPlane" src="img/p3.png" draggable="true">
<script>
    var plane = document.getElementById("imgPlane");
    var offsetX,offsetY;
    plane.addEventListener("dragstart",function(e){
        offsetX = e.offsetX;    //获取鼠标偏移值
        offsetY = e.offsetY;    //获取鼠标偏移值
        console.log("开始拖拽",e);
    });
    plane.addEventListener("drag",function(e){
        var x = e.clientX;  //获取鼠标当前坐标
        var y = e.clientY;  //获取鼠标当前坐标

        if( x==0 && y==0 ){ //鼠标松开之前最后一次drag事件无法获取坐标,所以要进行判断。
            return;
        }

        x -= offsetX;   //调整偏移值
        y -= offsetY;   //调整偏移值

        plane.style.left = x + "px";    //设置最终坐标
        plane.style.top = y + "px";     //设置最终坐标

        console.log("飞机拖拽中....",e);
    });
    plane.addEventListener("dragend",function(e){
        console.log("结束拖拽",e)
    });
</script>
</body>
</html>
2. 将飞机拖入回收站
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            text-align:center;
        }
        #dustbin{
            opacity:.3;
        }
    </style>
</head>
<body>
<h1>拖动飞机至回收站</h1>
<hr>
<img id="dustbin" src="img/dustbin.png">
<hr>
<img id="p1" class="plane" src="img/p3.png">
<img id="p2" class="plane" src="img/p4.png">
<img id="p3" class="plane" src="img/p5.png">
<script>
    var planes = document.getElementsByClassName("plane");
    for(var i=0; i<planes.length; i++){
        planes[i].addEventListener("dragstart",function(e){  //绑定事件
            e.dataTransfer.setData("PlaneID",this.id);  //保存当前操作对象id
        })
    }

    var dustbin = document.getElementById("dustbin");
    dustbin.addEventListener("dragenter",function(e){
        console.log("拖动进入");
        dustbin.style.opacity = 1;  //设置垃圾箱透明度效果
    });
    dustbin.addEventListener("dragover",function(e){
        console.log("拖动至目标内");
        e.preventDefault(); //阻止默认操作,实现可拖拽
    });
    dustbin.addEventListener("drop",function(e){
        console.log("松开拖动");
        dustbin.style.opacity = .3;
        var planeId = e.dataTransfer.getData("PlaneID");    //获取当前拖拽对象
        var p = document.getElementById(planeId);
        p.parentNode.removeChild(p);    //从DOM树移除对象
    });
    dustbin.addEventListener("dragleave",function(e){
        console.log("拖动离开");
        dustbin.style.opacity = .3;
    });
</script>
</body>
</html>
  1. 补充:将客户端本地文件拖入浏览器中
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页