Html5 拖拽

最新推荐文章于 2024-04-20 11:06:33 发布

街角咖啡

最新推荐文章于 2024-04-20 11:06:33 发布

阅读量334

点赞数

分类专栏： HTML5 文章标签： html5 拖拽

本文链接：https://blog.csdn.net/vol/article/details/66472530

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Html5 拖拽

概念
1. 拖拽：通过鼠标操作，将源（img div 一段文本）对象拖拽至目标对象。
2. 源对象：指的是我们鼠标点击的一个事物，这里可以是一张图片，一个DIV，一段文本等等。
3. 目标对象：指的是我们拖动源对象后移动到一块区域，源对象可以进入这个区域，可以在这个区域上方悬停(未松手)，可以释松手释放将源对象放置此处(已松手)，也可以悬停后离开该区域。
拖拽技术实现
1. 原生DOM
2. 使用jQuery插件(其它第三方插件)
3. HTML5 中提供的拖拽功能
  - draggable 允许/禁用拖拽功能。
拖拽触发事件
1. 源对象事件
  1. dragstart - 当鼠标开始拖放时被触发
  2. drag - 当鼠标拖放过程中，类似于mousemove
  3. dragend - 当鼠标拖放结束时触发
2. 目标对象事件
  1. dragenter - 源对象拖动着进入目标对象时
  2. dragover - 源对象停留在目标对象上方时
  3. dragleave - 源对象拖动着离开目标对象时
  4. drop - 源对象拖动着在目标对象上方释放/松开鼠标
拖动源对象事件和目标对象事件中传递数据
1. 拖动事件新属性 e.dataTransfer
  - 功能：用于在源对象和目标对象的事件间传递数据。
2. 数据保存
  - e.dataTransfer.setData( k , v ) //k, v 必须都是string类型
3. 数据读取
  - e.dataTransfer.getData( k )
拖拽案例
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>