html5 - 拖拽属性简易介绍

最新推荐文章于 2023-08-18 22:20:23 发布

kelin_Li

最新推荐文章于 2023-08-18 22:20:23 发布

阅读量1.7k

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/kelin_Li/article/details/50886332

版权

在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>

效果图如下

拖拽之后

共同学习，一起进步！

kelin_Li

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html5 - 拖拽属性简易介绍

在HTML5之前，网页中实现拖拽功能要借助到js中的（onmousedown + onmousemove），现在HTML5内部就支持了拖拽功能，结合js能够极大方便我们实现拖拽功能，但是此功能仅能支持偶先的几款浏览器。创建拖拽对象需要给要拖拽的对象设置draggable属性，它有3个值，true：元素可以拖拽，false:元素不可以拖拽，auto：浏览器自己判断元素是否可以被拖拽。...
复制链接

扫一扫