HTML5-简单拖放操作

HTML5的拖放操作

HTML5的拖放

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

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

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

实例:

html 复制代码
<!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的拖放操作中,首先要明确拖拽元素和目标元素

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

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

拖拽元素事件

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

目标元素事件

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

实例:

html 复制代码
<!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>

运行结果:

dataTransfer对象

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

setData()方法

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

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

语法格式:

html 复制代码
setData(sFormat,sData);

说明如下:

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

getData()方法

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

语法格式如下:

html 复制代码
getData(sFormat);

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

html 复制代码
<!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>

运行结果:

相关推荐
人工智能训练师16 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny0716 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy17 小时前
css的基本知识
前端·css
昔人'17 小时前
css `lh`单位
前端·css
破无差18 小时前
《赛事报名系统小程序》
小程序·html·uniapp
Nan_Shu_61419 小时前
Web前端面试题(2)
前端
知识分享小能手19 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队20 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光20 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql52021 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js