HTML5-简单拖放操作

站长

2024年04月22日 10:02 · 阅读数 7

HTML5的拖放操作

HTML5的拖放

概念：在HTML5中，拖放是一种常见的特性，可以抓取元素并拖入不同的位置。任何元素都可以被拖放。

这种拖放操作仅限于在浏览器内的元素间拖放，不能实现跨应用拖放

其中图片，链接默认是开启的

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简单拖放</title>
		<style>
			#square{
				width:300px;
				height:200px;
				background:blue;
			}
			#box{
				width:300px;
				height:200px;
				border:1px solid black;
			}
		</style>
	</head>
	<body>
		<div id="square" draggable="true"></div>
		<div id="box"></div>
	</body>
</html>

运行结果:

HTML5-简单拖放操作

拖放事件

在HTML5的拖放操作中，首先要明确拖拽元素和目标元素

拖拽元素，指的是在页面中设置了 draggable="true" 属性的元素。
目标元素，页面中的任何一个元素都可以成为目标元素。

拖放事件主要分成两个部分：拖拽元素事件和目标元素事件

拖拽元素事件

事件	描述
ondragstart	拖拽前触发，拖拽瞬间发生的事情
ondrag	对象被拖拽时每次鼠标指针移动都会触发
ondragend	拖拽对象时用户释放鼠标按键的时候触发

目标元素事件

事件	描述
ondragenter	鼠标指针初次移到目标元素上并且正在进行拖拽时触发，相当于onmouseover事件
ondragover	拖拽时鼠标指针移到某个元素上的时候触发
ondragleave	拖拽时鼠标指针离开某个元素的时候触发，相当于onmouseout事件
ondrop	拖拽结束，放置元素时触发

实例：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>触发拖放事件</title>  
    <style>  
        #box{  
            width:340px;  
            height:250px;  
            border:1px solid black;  
         
        }  
    </style>  
</head>  
<body>  
    <img src="../img/a.jpg" alt="" id="img1" draggable="true">  
    <div id="box"></div>  
    <script>  
        // 获取元素  
        var oImg=document.getElementById("img1");  
        var oBox=document.getElementById("box");  
        // 拖拽元素事件  
        // 拖拽开始  
        oImg.ondragstart=function(ev){  
            ev.dataTransfer.setData("text/plain", ev.target.src); // 设置数据类型和数据  
            this.style.border="1px solid red";  
        };  
        // 拖拽的时候  
        oImg.ondrag=function(ev){  
            document.title="ok";  
        };  
        // 拖拽结束  
        oImg.ondragend=function(){  
            this.style.border="none";  
        };  
        // 目标元素事件  
        // 进入目标元素  
        oBox.ondragenter=function(){  
            this.style.background="skyblue";  
        };  
        // 拖拽到目标元素  
        oBox.ondragover=function(ev){  
            // 要想触发drag事件，就必须在dragover事件中阻止默认行为  
            ev.preventDefault();  
        };  
        // 离开目标元素  
        oBox.ondragleave=function(){  
            this.style.background="orange";  
        };  
        // 在目标元素中释放  
        oBox.ondrop=function(ev){  
			var data = ev.dataTransfer.getData("text/plain"); // 获取数据  
            var img = new Image(); // 创建一个新的Image对象  
            img.src = data; // 设置图片源为拖拽的数据（即图片的URL）  
            this.appendChild(img); // 将图片添加到目标元素中  
            alert("success!"); // 弹出成功提示框  
        }  
    </script>  
</body>  
</html>

运行结果:

HTML5-简单拖放操作

dataTransfer对象

dataTransfer 对象用于从被拖拽元素向目标元素传递字符串格式的数据

setData()方法

语法：以指定格式给 dataTransfer 对象赋予数据。

要解决Firefox下的拖放问题，必须设置 setData()方法，才可以拖放除图片之外的其他标签。

语法格式：

setData(sFormat,sData);

说明如下：

sFormat属性定义数据的格式，也就是数据的类型
sData 属性为待赋值的数据

getData()方法

语法：从 dataTransfer 对象中获取数据，根据 key，获取相应的value

语法格式如下：

getData(sFormat);

sFormat属性代表数据格式，用来保存数据类型的字符串，取值时 text 或 URL 案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dataTransfer对象</title>
		<style>
			#box{
				width:340px;
				height:250px;
				border:1px solid black;
			}
		</style>
	</head>
	<body>
		<img src="../images/p1.jpg" alt=""id="img">
		<div id="box"></div>
		<script>
			// 获取元素
			var oImg=document.getElementById("img");
			var oBox=document.getElementById("box");
			// 方法
			oImg.ondragstart=function(ev){
				ev.dataTransfer.setData("text",ev.target.id);
			}
			oBox.ondragover=function(ev){
				ev.preventDefault();
			}
			// 在目标元素中释放
			oBox.ondrop=function(ev){
				var mydata=ev.dataTransfer.getData("text");
				ev.target.append(document.getElementById(mydata));
			}
			
		</script>
	</body>
</html>

运行结果:

HTML5-简单拖放操作