Html5 拖拽

来源：互联网发布：常见的网络推广技巧编辑：程序博客网时间：2024/06/16 05:26

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>

补充：将客户端本地文件拖入浏览器中

0 0