前端——html拖拽原理

文章目录

    • ⭐前言
    • ⭐draggable属性
      • 💖 api
      • 💖 单向拖动示例
      • 💖 双向拖动示例
    • ⭐总结
    • ⭐结束

yma16-logo

⭐前言

大家好，我是yma16，本文分享关于 前端——html拖拽原理。
vue3系列相关文章：
vue3 + fastapi 实现选择目录所有文件自定义上传到服务器
前端vue2、vue3去掉url路由“ # ”号——nginx配置
csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板
认识vite_vue3 初始化项目到打包
python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示
让大模型分析csdn文章质量 —— 提取csdn博客评论在文心一言分析评论区内容
html draggable属性
dragabble属性是HTML5中新增加的属性，可以应用于任何HTML元素上，实现拖拽效果。当该属性设置为true时，元素就可以被拖拽。当元素被拖拽时，会触发dragstart、drag、dragend等事件。

例如：

<div draggable="true">
  拖拽我
</div>

上面的代码会在一个div元素上添加draggable属性，使其可拖拽。通过设置属性值为true，我们就可以实现该元素的拖拽效果。

⭐draggable属性

分解拖动动作

  1. 鼠标选择div
  2. 鼠标按住不放拖拽div
  3. 拖拽的div（源数据）在目标区域div外侧移动
  4. 拖拽的div（源数据）在目标区域div内侧移动
  5. 拖拽的div（源数据）在目标区域div内侧掉落

draggable属性：全局属性 draggable 是一种枚举 (en-US)属性，用于标识元素是否允许使用浏览器原生行为或 HTML 拖放操作 API 拖动。

true: 可以拖动
false: 禁止拖动
auto: 跟随浏览器定义是否可以拖动。
draggable 可以有如下取值：

true：表示元素可以被拖动
false：表示元素不可以被拖动
如果该属性没有设值，则默认值 为 auto，表示使用浏览器定义的默认行为。
注意：
这个属性是枚举类型 (en-US)，而不是布尔类型。这意味着必须显式指定值为 true 或者 false，像 <img draggable> 这样的简写是不允许的。正确的用法是 <img draggable="false">。

💖 api

对象事件说明
被拖动对象drag拖动时反复触发 drag ，事件在用户拖动元素或选择的文本时，每隔几百毫秒就会被触发一次。
被拖动对象dragstart拖动开始时触发，事件在用户开始拖动元素或被选择的文本时调用
被拖动对象dragend拖动结束时触发，事件在拖放操作结束时触发（通过释放鼠标按钮或单击 escape 键）
目标对象drop事件在元素或文本选择被放置到有效的放置目标上时触发。为确保 drop 事件始终按预期触发，应当在处理 dragover 事件的代码部分始终包含 preventDefault() 调用
目标对象 dragenter进入区域时触发，事件在可拖动的元素或者被选择的文本进入一个有效的放置目标时触发
目标对象 dragover悬浮区域时触发，事件在可拖动的元素或者被选择的文本被拖进一个有效的放置目标时（每几百毫秒）触发
目标对象 dragleave离开区域时触发，事件在拖动的元素或选中的文本离开一个有效的放置目标时被触发

💖 单向拖动示例

元素单方向拖动

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="style.css" rel="stylesheet" type="text/css" />
		<title>drag</title>
		<style>
			html {
				height: 100%;
				width: 100%;
				background: #005AA7;  /* fallback for old browsers */
				background: -webkit-linear-gradient(to bottom, #FFFDE4, #005AA7);  /* Chrome 10-25, Safari 5.1-6 */
				background: linear-gradient(to bottom, #FFFDE4, #005AA7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

			}

			.container {
				text-align: center;
				padding: 64px;
				display: flex;
				justify-content: space-between;
			}

			.container-left {
				width: 40%;
			}

			.container-right {
				width: 40%;
			}

			.container-left-box {
				min-height: 100px;
				line-height: 100px;
				min-width: 400px;
				color:#fff;
				background: #b92b27;  /* fallback for old browsers */
				background: -webkit-linear-gradient(to right, #1565C0, #b92b27);  /* Chrome 10-25, Safari 5.1-6 */
				background: linear-gradient(to right, #1565C0, #b92b27); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

				cursor: pointer;
				border-radius: 8px;
			}

			.container-right-box {
				min-height: 100px;
				line-height: 100px;
				min-width: 400px;
				color:#fff;
				background: #12c2e9;  /* fallback for old browsers */
				background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);  /* Chrome 10-25, Safari 5.1-6 */
				background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

				cursor: pointer;
				border-radius: 8px;
			}

			.dragging {
				opacity: .5;
			}
			
			.dragover{
				opacity: .5;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="container-left">
				<div class="container-left-box" draggable="true" id="source">
					左侧可以拖动
				</div>
			</div>
			<div class="container-right">
				<div class="container-right-box dropzone" id="droptarget">
					可以拖到这里
				</div>
			</div>
		</div>
		<script>
			// 配置项
			const config = {
				draged: null
			}

			function init() {
				console.log('window onload');
				/* 在可拖动的目标上触发的事件 */
				const source = document.getElementById("source");
				source.addEventListener("drag", (event) => {
					console.log("dragging");
				});

				source.addEventListener("dragstart", (event) => {
					// 保存被拖动元素的引用
					config.draged = event.target;
					// 设置为半透明
					event.target.classList.add("dragging");
				});

				source.addEventListener("dragend", (event) => {
					// 拖动结束，重置透明度
					event.target.classList.remove("dragging");
				});

				/* 在放置目标上触发的事件 */
				const target = document.getElementById("droptarget");
				target.addEventListener(
					"dragover",
					(event) => {
						// 阻止默认行为以允许放置
						event.preventDefault();
					},
					false,
				);

				target.addEventListener("dragenter", (event) => {
					// 在可拖动元素进入潜在的放置目标时高亮显示该目标
					if (event.target.classList.contains("dropzone")) {
						event.target.classList.add("dragover");
					}
				});

				target.addEventListener("dragleave", (event) => {
					// 在可拖动元素离开潜在放置目标元素时重置该目标的背景
					if (event.target.classList.contains("dropzone")) {
						event.target.classList.remove("dragover");
					}
				});

				target.addEventListener("drop", (event) => {
					// 阻止默认行为（会作为某些元素的链接打开）
					event.preventDefault();
					// 将被拖动元素移动到选定的目标元素中
					if (event.target.classList.contains("dropzone")) {
						event.target.classList.remove("dragover");
						// 删除自身
						// config.draged.parentNode.removeChild(config.draged);
						event.target.appendChild(config.draged);
					}
				});
			}

			window.onload = init;
		</script>
	</body>

</html>

拖动效果
single-drag-demo

💖 双向拖动示例

元素可以左右拖动

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="style.css" rel="stylesheet" type="text/css" />
		<title>drag</title>
		<style>
			html {
				height: 100%;
				width: 100%;
				background: #005AA7;
				/* fallback for old browsers */
				background: -webkit-linear-gradient(to bottom, #FFFDE4, #005AA7);
				/* Chrome 10-25, Safari 5.1-6 */
				background: linear-gradient(to bottom, #FFFDE4, #005AA7);
				/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

			}

			.container {
				text-align: center;
				padding: 64px;
				display: flex;
				justify-content: space-between;
			}

			.container-left {
				width: 40%;
				border: 1px solid #1565C0;
				border-radius: 8px;
			}

			.container-right {
				width: 40%;
			}

			.container-left-box {
				min-height: 100px;
				min-width: 100px;
				line-height: 100px;
				min-width: 400px;
				color: #fff;
				background: #b92b27;
				/* fallback for old browsers */
				background: -webkit-linear-gradient(to right, #1565C0, #b92b27);
				/* Chrome 10-25, Safari 5.1-6 */
				background: linear-gradient(to right, #1565C0, #b92b27);
				/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

				cursor: pointer;
				border-radius: 8px;
				
			}

			.container-right-box {
				min-height: 100px;
				line-height: 100px;
				min-width: 400px;
				color: #fff;
				background: #12c2e9;
				/* fallback for old browsers */
				background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
				/* Chrome 10-25, Safari 5.1-6 */
				background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
				/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

				cursor: pointer;
				border-radius: 8px;
			}

			.dragging {
				opacity: .5;
			}

			.dragover {
				opacity: .5;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="container-left dropzone" id='left-box'>
				<div class="container-left-box" draggable="true" id="yma16">
					yma16
				</div>
			</div>
			<div class="container-right" id='right-box'>
				<div class="container-right-box dropzone" id="csdn">
					csdn
				</div>
			</div>
		</div>
		<script>
			// 配置项
			const config = {
				draged: null
			}

			const drag = (event) => {
				console.log("dragging");
			}

			const dragStart = (event) => {
				// 保存被拖动元素的引用
				config.draged = event.target;
				// 设置为半透明
				event.target.classList.add("dragging");
			}

			const dragEnd = (event) => {
				// 拖动结束，重置透明度
				event.target.classList.remove("dragging");
			}

			// 目标

			const dragOver = (event) => {
				// 阻止默认行为以允许放置
				event.preventDefault();
			}

			const dragLeave = (event) => {
				// 在可拖动元素离开潜在放置目标元素时重置该目标的背景
				if (event.target.classList.contains("dropzone")) {
					event.target.classList.remove("dragover");
				}
			}

			const dragEnter = (event) => {
				// 在可拖动元素进入潜在的放置目标时高亮显示该目标
				if (event.target.classList.contains("dropzone")) {
					event.target.classList.add("dragover");
				}
			}

			const drop = (event) => {
				// 阻止默认行为（会作为某些元素的链接打开）
				event.preventDefault();
				// 将被拖动元素移动到选定的目标元素中
				if (event.target.classList.contains("dropzone")) {
					event.target.classList.remove("dragover");
					// 删除自身
					config.draged.parentNode.removeChild(config.draged);
					// 添加元素
					event.target.appendChild(config.draged);
				}
			}

			function yma16ToLeft() {

				/* 在放置目标上触发的事件 */
				const target = document.getElementById("left-box");
				if(!target.classList.contains('dropzone')){
					target.classList.add('dropzone')
				}

				target.addEventListener(
					"dragover",
					dragOver,
					false,
				);

				target.addEventListener("dragenter", dragEnter);

				target.addEventListener("dragleave", dragLeave);

				target.addEventListener("drop", drop);
			}

			function yma16ToRight() {
				
				const source = document.getElementById("yma16");
				source.addEventListener("drag", drag);

				source.addEventListener("dragstart", dragStart);

				source.addEventListener("dragend", dragEnd);

				/* 在放置目标上触发的事件 */
				const target = document.getElementById("csdn");
				

				target.addEventListener(
					"dragover",
					dragOver,
					false,
				);

				target.addEventListener("dragenter", dragEnter);

				target.addEventListener("dragleave", dragLeave);

				target.addEventListener("drop", drop);
			}


			function init() {
				console.log('window onload');
				/* 在可拖动的目标上触发的事件 */
				yma16ToLeft()
				yma16ToRight()
			}

			window.onload = init;
		</script>
	</body>

</html>

效果如下：
双向拖动

⭐总结

HTML的draggable属性可以将元素设置为可拖动的。它可以帮助我们实现拖拽功能，让用户可以将元素拖拽到指定的位置或者执行拖拽结束后的某些操作。draggable属性有以下几个取值：

  1. draggable=“true”：表示元素可以被拖动。

  2. draggable=“false”：表示元素不可以被拖动。

  3. draggable=“auto”：表示元素可以被拖动，但是浏览器会根据元素类型和属性自动决定是否允许拖动。

在使用draggable属性时，需要注意以下几点：

  1. 可以设置辅助属性dataTransfer来传输数据。

  2. 可以设置ondragstart、ondrag、ondragenter、ondragover、ondragleave和ondragend等事件来实现一些特定操作。

  3. 需要在ondrop事件中阻止默认行为，否则拖拽的元素将会被打开或者在浏览器中进行导航。

综上所述，draggable属性是一个非常实用的属性，可以帮助我们实现一些常用的拖拽功能。

⭐结束

本文分享到这结束，如有错误或者不足之处欢迎指出！
sence

👍 点赞，是我创作的动力！
⭐️ 收藏，是我努力的方向！
✏️ 评论，是我进步的财富！
💖 感谢你的阅读！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/218150.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

仅 CSS 阅读进度条

仅 CSS 阅读进度条

为了构建一个阅读进度条&#xff0c;即显示用户向下滚动时阅读文章的进度&#xff0c;很难不考虑 JavaScript。但是&#xff0c;事实证明&#xff0c;您也可以使用纯 CSS 构建阅读进度条。 从本质上讲&#xff0c;一个名为 animation-timeline 的新实验性 CSS 属性可以让你指定…
阅读更多...
【工具使用-Audition】如何使用Audition频谱分析

【工具使用-Audition】如何使用Audition频谱分析

一&#xff0c;简介 本文以Audition 2020为例&#xff0c;介绍如何生成频谱分析的图像。 二&#xff0c;操作步骤 使用快捷键“shift D” 三&#xff0c;总结 本文主要介绍如何查看频谱分析&#xff0c;供参考。
阅读更多...
dll动态链接库【C#】

dll动态链接库【C#】

1说明： 在C#中，dll是添加 【类库】生成的。 2添加C#的dll： （1）在VS中新建一个Windows应用程序项目，并命名为TransferDll。 （2）打开Windows窗体设计器，从工具箱中为窗体添加相应的控件。 （3）在该应用程序的“解决方案资源管理”中的“引用”文件上单击鼠标右键， 在…
阅读更多...
沐风老师3DMAX拼图随机生成器Puzzle建模工具使用教程

沐风老师3DMAX拼图随机生成器Puzzle建模工具使用教程

3DMAX拼图随机生成器Puzzle建模工具使用教程 3DMAX拼图随机生成器Puzzle&#xff0c;是一款用MAXScript脚本语言开发的3dsMax小工具&#xff0c;可以随机创建可编辑多边形3D拼图对象。可批量生成阵列。 【适用版本】 3dMax2015-2024&#xff08;不仅限于此范围&#xff09; 【…
阅读更多...
【Unity动画】Unity 动画播放的流程

【Unity动画】Unity 动画播放的流程

本文以2D为案例&#xff0c;讲解Unity 播放动画的流程 准备和导入2D动画资源 外部导入序列帧生成的 Unity内部制作的 外部导入的3D动画 2.创建动画过程 打开时间轴Ctrl6 选中场景中的一个未来需要播放动画的物体 回到时间轴点击Create一个新动画片段 拖动2D动画资源放入…
阅读更多...
探索图像生成中的生成对抗网络 (GAN) 世界

探索图像生成中的生成对抗网络 (GAN) 世界

一、介绍 生成对抗网络&#xff08;GAN&#xff09;的出现标志着人工智能领域的一个重要里程碑&#xff0c;特别是在图像生成领域。GAN 由 Ian Goodfellow 和他的同事于 2014 年提出&#xff0c;代表了机器学习中的一种新颖方法&#xff0c;展示了生成高度逼真和多样化图像的能…
阅读更多...
专业做除甲醛净化器的品牌 甲醛净化器什么牌子最好用

专业做除甲醛净化器的品牌 甲醛净化器什么牌子最好用

室内产生了超标的甲醛&#xff0c;大部分都会采取选择甲醛空气净化器来去除&#xff0c;甲醛净化器逐渐成为室内清除甲醛的主力&#xff0c;在选择甲醛净化器时&#xff0c;人们常常会被市场上琳琅满目的空气净化器品牌所迷惑&#xff0c;各品牌和型号都声称自己最好&#xff0…
阅读更多...
❀dialog命令运用于linux❀

❀dialog命令运用于linux❀

目录 ❀dialog命令运用于linux❀ msgbox部件&#xff08;消息框&#xff09; yesno部件&#xff08;yesno框&#xff09; inputbox部件&#xff08;输入文本框&#xff09; textbox部件&#xff08;文本框&#xff09; menu部件&#xff08;菜单框&#xff09; fselect部…
阅读更多...
Python---面向对象的基本概念

Python---面向对象的基本概念

对象 对象&#xff0c;object&#xff0c;现实业务逻辑的一个动作实体就对应着OOP编程中的一个对象&#xff01; 所以&#xff1a;① 对象使用属性&#xff08;property&#xff09;保存数据&#xff01;② 对象使用方法&#xff08;method&#xff09;管理数据&#xff01; …
阅读更多...
PyQt实战 创建一个PyQt5项目

PyQt实战 创建一个PyQt5项目

前后端分离 参考链接 PyQt5实战&#xff08;二&#xff09;&#xff1a;创建一个PyQt5项目_pyqt5实战项目_笨鸟未必先飞的博客-CSDN博客 项目目录 创建一个QT项目 调用pyuic工具将dialog.ui文件编译为Python程序文件ui_dialog.py。 # -*- coding: utf-8 -*-# Form implemen…
阅读更多...
element-ui upload组件中将file文件数据转成二进制流数据格式

element-ui upload组件中将file文件数据转成二进制流数据格式

方法一 handleBeforeUpload (file)const reader new FileReader()reader.readAsArrayBuffer(file)reader.onload async function (theFile) {const binary new Blob([theFile.target.result]) // 转成二进制流数据 即binary数据格式}}方法二 const aBlob new Blob([file],…
阅读更多...
【C语言】深入理解指针（1）

【C语言】深入理解指针（1）

目录 前言 &#xff08;一&#xff09;内存与地址 从实际生活出发 地址 内存 内存与地址关系密切 &#xff08;二&#xff09;指针变量 指针变量与取地址操作符 指针变量与解引用操作符 指针的大小 指针的运算 指针 - 整数 指针-指针 指针的关系运算 指针的类型的…
阅读更多...
2022 China Collegiate Programming Contest (CCPC) Guilin Site

2022 China Collegiate Programming Contest (CCPC) Guilin Site

A.Lily Problem - A - Codeforces 题意 思路 数所有周围没L的格子 #include <bits/stdc.h>using i64 long long;constexpr int N 2e5 10; constexpr int mod 1e9 7; constexpr int Inf 0x3f3f3f3f; constexpr double eps 1e-10;std::string s;int n;void solv…
阅读更多...
vue3 + TS 项目中使用pinia-plugin-persistedstate持久化缓存

vue3 + TS 项目中使用pinia-plugin-persistedstate持久化缓存

Vue 3和Pinia是一对非常好的组合&#xff0c;可以帮助你构建现代化的Vue应用程序。而pinia-plugin-persistedstate是一个用于在Pinia存储中实现状态持久化的插件。下面我将详细介绍如何在Vue 3应用程序中使用Pinia和pinia-plugin-persistedstate模块。 首先&#xff0c;确保你…
阅读更多...
Redis高可用之Sentinel哨兵模式

Redis高可用之Sentinel哨兵模式

一、背景与简介 Redis关于高可用与分布式有三个与之相关的运维部署模式。分别是主从复制master-slave模式、哨兵Sentinel模式以及集群Cluster模式。 这三者都有各自的优缺点以及所应对的场景、对应的业务使用量与公司体量。 1、主从master-slave模式 【介绍】 这种模式可以采用…
阅读更多...
Vue学习计划--Vue2（二）Vue代理方式

Vue学习计划--Vue2（二）Vue代理方式

Vue data中的两种方式 对象式 data:{}函数式 data(){return {} }示例&#xff1a; <body><div id"app">{{ name }} {{ age}} {{$options}}<input type"text" v-model"value"></div><script>let vm new Vue({el: …
阅读更多...
【C++】STL简介（了解）【STL的概念，STL的历史缘由，STL六大组件、STL的重要性、以及如何学习STL、STL的缺陷的讲解】

【C++】STL简介（了解）【STL的概念，STL的历史缘由，STL六大组件、STL的重要性、以及如何学习STL、STL的缺陷的讲解】

这里写自定义目录标题 一、什么是STL二、STL的版本1. 原始版本2. P. J. 版本3. RW版本★ 4. SGI版本 三、STL的六大组件四、STL的重要性五、如何学习STL六、STL的缺陷 一、什么是STL STL ( standard template libaray - 标准模板库 )&#xff1a;是C标准库 的重要组成部分&…
阅读更多...
nodejs+vue+微信小程序＋python＋PHP就业求职招聘信息平台的设计与实现-计算机毕业设计推荐

nodejs+vue+微信小程序＋python＋PHP就业求职招聘信息平台的设计与实现-计算机毕业设计推荐

主要有前端和后端&#xff0c;前端显示整个网站的信息&#xff0c;后端主要对前端和网站的基本信息进行管理。用户端模块主要是系统中普通用户在注册、登录系统可以看到自己的基本信息&#xff0c;维护自己的信息&#xff1b;管理员端模块主要是管理员登录后对整个系统相关操作…
阅读更多...
【算法】算法题-20231205

【算法】算法题-20231205

这里写目录标题 一、LCS 01. 下载插件二、已知一个由数字组成的列表&#xff0c;请将列表中的所有0移到右侧三、实现一个trim()函数&#xff0c;去除字符串首尾的空格&#xff08;不能使用strip()方法&#xff09; 一、LCS 01. 下载插件 简单 小扣打算给自己的 VS code 安装使…
阅读更多...
自动化巡检实现方法 （一）------- 思路概述

自动化巡检实现方法 （一）------- 思路概述

一、自动化巡检需要会的技能 1、因为巡检要求一天24小时全天在线&#xff0c;因此巡检程序程序一定会放在服务器上跑&#xff0c;所以要对linux操作熟悉哦 2、巡检的代码要在git上管理&#xff0c;所以git的基本操作要熟悉 3、为了更方便不会代码的同学操作&#xff0c;所以整个…
阅读更多...
最新文章

Copyright @ 2022~2023