HTML5-简单拖放操作

最新推荐文章于 2024-08-21 15:02:16 发布

原创

最新推荐文章于 2024-08-21 15:02:16 发布 · 1.1k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #html

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的拖放操作中，首先要明确拖拽元素和目标元素

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

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

拖拽元素事件

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