html5 - 拖拽属性简易介绍

来源：互联网发布：如何在用网络赚钱编辑：程序博客网时间：2024/06/06 00:59

在HTML5之前，网页中实现拖拽功能要借助到js中的（onmousedown + onmousemove），现在HTML5内部就支持了拖拽功能，结合js能够极大方便我们实现拖拽功能，但是此功能仅能支持偶先的几款浏览器。

创建拖拽对象

需要给要拖拽的对象设置draggable属性，它有3个值，true：元素可以拖拽，false:元素不可以拖拽，auto：浏览器自己判断元素是否可以被拖拽。

处理拖拽事件

当我们，拖拽对象的时候会触发拖拽事件

A,dragstart:当元素拖拽开始触发

B,drag:在元素拖拽过程中触发

C,dragend:在元素拖拽结束时触发

创建投放区

当把拖拽对象进入投放区的时候回触发相关的事件

A,dragenter : 当拖拽对象进入投放区时触发

B,dragover : 拖拽对象在投放区内移动时触发；

C,dragleave : 拖拽对象没有投放到投放区，离开投放区的时候触发

D,drop : 拖拽对象投放到投放区是触发

使用dataTransfer传递数据

当我们需要拖拽对象向投放区传递数据的时候，用到dataTransfer有下面的属性和方法

1,type : 返回数据的格式

2，getData ：返回指定格式的数据

3，setData ：设置指定格式的数据

4，clearData ：移除指定格式的数据

5，files ：返回已经投放的文件的信息数组

注意： dragenter,dragover可能会受到默认事件的影响，用e.preventDefault()来阻止事件默认事件

<!DOCTYPE html><html><head><title> 拖拽 </title></head><style>#one{    width: 200px;height: 200px;border: 1px solid red;}#two{    width: 100px;height: 100px;border: 1px solid blue;}</style><script>window.onload = function(){    // 获取one，two两个元素    var one = document.getElementById("one");    var two = document.getElementById("two");      // two开始拖拽    two.ondragstart = function(e){        e.dataTransfer.setData("Text","hello"); <span style="color:#3366FF;">//设置指定格式的数据</span>        one.innerHTML += "Andy";    }   // two 拖拽过程中    two.ondrag = function (){        one.innerHTML += "KK-";    }    // two 拖拽结束    two.ondragend = function () {        one.innerHTML += "success";    }    // 进入拖拽区域    one.ondragenter = function (e){        one.innerHTML += "OK";        e.preventDefault();    }    // 在托在区移动    one.ondragover = function (e){        e.preventDefault();    }    // 离开拖拽区    one.ondragleave = function (e){        e.preventDefault();    }        // 拖拽对象投放到拖拽区    one.ondrop = function (e) {        e.preventDefault();        alert(e.dataTransfer.getData("Text")); <span style="color:#3366FF;">// 返回指定格式的数据</span>        one.appendChild(two);    }}</script><body>    <div id = "one"></div>    <div id = "two" draggable = true></div></body></html>

上面是一个简单的demo

为了便于大家的进一步的理解

在附上一个简单的例子，勿喷哈

<!DOCTYPE html><html><meta http-equiv="Content－Type" content="text/html; charset=gb2312"><head>drag</head><style> #box{  width:200px;height:200px;border:1px solid red; } #con{ width:200px;height:200px;border:1px solid blue;list-style:none;padding:0;margin:0; } li{   width:150px;height:30px;margin:5px 0;background:#ccc;line-height:30px;text-align:center;list-style:none; }</style><script>  window.onload=function  () {   var box=document.getElementById("box");   var con=document.getElementById("con");   var lis=document.getElementsByTagName("li");   for (var i=0; i<lis.length; i++) {    lis[i].draggable=true;lis[i].flag=false;lis[i].ondragstart=function  () {     // 开始拖拽的时候，给每一行设置一个标记 this.flag=true;  }lis[i].ondragend=function  () {// 结束拖拽的时候，标记的值取反 this.flag=false;}   }   box.ondragenter=function  (e) {     e.preventDefault();   }   box.ondragover=function  (e) {     e.preventDefault();   }   box.ondragleave=function  (e) {     e.preventDefault();   }   box.ondrop=function  (e) {     for (var i=0; i<lis.length; i++) {   if(lis[i].flag){     box.appendChild(lis[i]);   }     }     e.preventDefault();   }  con.ondragenter=function  (e) {     e.preventDefault();   }   con.ondragover=function  (e) {     e.preventDefault();   }   con.ondragleave=function  (e) {     e.preventDefault();   }   con.ondrop=function  (e) {     for (var i=0; i<lis.length; i++) {     // 遍历，如果标记的值为真，则进行添加   if(lis[i].flag){     con.appendChild(lis[i]);   }     }     e.preventDefault();   }  }</script></head><body><div id="box"></div><ul id="con"><li>one</li><li>two</li><li>thress</li><li>four</li></ul></body></html>

效果图如下

拖拽之后

共同学习，一起进步！

0 0