前端——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.mzph.cn/news/197728.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Android : DataBinding 简化开发 简单应用

Android : DataBinding 简化开发 简单应用

1.导包 ViewModel 用于观察数据 // 使用androidx版本库 implementation androidx.lifecycle:lifecycle-extensions:2.1.0-alpha032.在build.gradle 添加 在android 代码块中添加 复制后点更新&#xff08;Sync Now&#xff09; android{...// 步骤1.开启data bindingdataBin…
阅读更多...
根据已有安装的cuda配置合适的pytorch环境

根据已有安装的cuda配置合适的pytorch环境

目前网络上根据电脑配置安装合适的深度学习环境的帖子已经很多了&#xff0c;但是现实中会出现很久之前已经安装了对应的cuda&#xff0c;但是现在忘记了当时安装的是什么版本。本文针对这一问题展开攻略。 1 cuda安装版本查询 我们在查询自己应该安装什么版本的cuda时&#…
阅读更多...
【模电】直流通路与交流通路

【模电】直流通路与交流通路

直流通路与交流通路 通常&#xff0c;在放大电路中&#xff0c;直流电源的作用和交流信号的作用总是共存的&#xff0c;即静态电流、电压和动态电流、电压总是共存的。但是由于电容、电感等电抗元件的存在&#xff0c;直流量所流经的通路与交流信号所流经的通路不完全相同。因此…
阅读更多...
【设计模式】职责链模式设计在线文档帮助系统

【设计模式】职责链模式设计在线文档帮助系统

职责链模式设计在线文档帮助系统 任务三&#xff1a;使用职责链模式设计在线文档帮助系统 某公司欲开发一个软件系统的在线文档帮助系统&#xff0c;用户可以在任何一个查询环境中输入查询关键字&#xff0c;如果当前查询环境下没有相关内容&#xff0c;则系统会将查询按照一定…
阅读更多...
《微信小程序开发从入门到实战》学习四十一

《微信小程序开发从入门到实战》学习四十一

4.2 云开发JSON数据库 4.2.12 更新指令 update方法除了用指定值更新字段外&#xff0c;数据库API还提供了更新指令执行更复杂的 更新的操作&#xff0c;更新指令被封装在db.command对象中的函数。如下表所示&#xff1a; set 设置字段为指定值 remove 删除字…
阅读更多...
获取Spring容器Bean工具类

获取Spring容器Bean工具类

获取Spring容器Bean工具类 1、创建SpringUtils工具类2、注册 SpringUtils工具类3、如果打包的是War方式&#xff0c;可能上面两个注册工具类的方法都没用 1、创建SpringUtils工具类 public class SpringUtils implements ApplicationContextAware {private static Application…
阅读更多...
【鸿蒙应用开发】开发环境搭建及IDE安装使用

【鸿蒙应用开发】开发环境搭建及IDE安装使用

1.下载安装包 安装包下载地址&#xff1a; 点击跳转下载页面 可以根据自己的操作系统选择对应版本下载。 本文以Windows安装为例&#xff0c;Mac安装方式相同 2. 安装 下载好后&#xff0c;打开安装包&#xff0c;进入安装界面&#xff1a; 点击Next&#xff0c;进入安…
阅读更多...
【Vue】使用 Vue CLI 脚手架创建 Vue 项目（使用命令行创建）

【Vue】使用 Vue CLI 脚手架创建 Vue 项目（使用命令行创建）

前言 在开始使用Vue进行开发之前&#xff0c;我们需要先创建一个Vue项目。Vue CLI&#xff08;Command Line Interface&#xff09;是一个官方提供的脚手架工具&#xff0c;可以帮助我们快速创建Vue项目。 步骤 打开终端或命令行工具&#xff0c;运行以下命令&#xff1a; vu…
阅读更多...
蔚碳科技联合中投会发布国内首个 ESG 尽职调查服务标准

蔚碳科技联合中投会发布国内首个 ESG 尽职调查服务标准

11 月 26 日&#xff0c;蔚碳&#xff08;上海&#xff09;科技有限公司&#xff08;以下简称“蔚碳科技”&#xff09;受邀出席由深圳市人民政府主办&#xff0c;深圳市发展和改革委员会、深圳市生态环境局、龙岗区人民政府共同承办的 2023 碳达峰碳中和论坛暨深圳国际低碳城论…
阅读更多...
Android 9.0中sdcard 的权限和挂载问题

Android 9.0中sdcard 的权限和挂载问题

问题&#xff1a;Android9 无法向u盘写入文件 报错&#xff1a; 2023-12-04 11:02:45.137 15640-15640 System.err com.example.permissiontest W java.io.FileNotFoundException: /storage/C5AF-1F0E/MyImages1/Image-2676.png (Permission denied)…
阅读更多...
手机升级到iOS15.8后无法在xcode(14.2)上真机调试

手机升级到iOS15.8后无法在xcode(14.2)上真机调试

之前手机是iOS14.2的系统,在xcode上进行真机测试运行良好&#xff0c;因为想要使用Xcode的Instruments功能&#xff0c;今天将系统更新到了iOS15.8 &#xff0c;结果崩了 说是Xcode和手机系统不兼容不能进行真机测试。在网上查不好些方法&#xff0c;靠谱的就是下载相关版本的…
阅读更多...
微信小程序保存二维码的过程

微信小程序保存二维码的过程

1.使用wx.canvasToTempFilePath将二维码绘制到画布上。 const ctx wx.createCanvasContext(qrcodeCanvas); ctx.drawImage(qrcodePath, 0, 0, canvasWidth, canvasHeight); ctx.draw(false, () > {wx.canvasToTempFilePath({x: 0,y: 0,width: canvasWidth,height: canvasH…
阅读更多...
05、pytest断言确定的异常

05、pytest断言确定的异常

官方用例 # content of test_sysexit.py import pytestdef f():raise SystemExit(1)def test_mytest():with pytest.raises(SystemExit):f()解读与实操 ​ 标准python raise函数可产生异常。pytest.raises可以断言某个异常会发现。异常发生了&#xff0c;用例执行成功&#x…
阅读更多...
常见的几种计算机编码格式

常见的几种计算机编码格式

前言&#xff1a; 计算机编码是指将字符、数字和符号等信息转换为计算机可识别的二进制数的过程&#xff0c;正因如此&#xff0c;计算机才能识别中英文等各类字符。计算机中有多种编码格式用于表示和存储文本、字符和数据&#xff0c;实际走到最后都是二进制&#xff0c;本质一…
阅读更多...
npm 常用命令

npm 常用命令

​ 一.npm更新所有依赖最新版本 安装组件 npm install -g npm-check-updates查看所有依赖最新版本 ncu更新所有依赖到最新版本 ncu -u 二. 查看单个依赖版本 npm info 依赖包名称 version&#xff08;查看当前最新版本&#xff09;npm info 依赖包名称 versions&#xff08…
阅读更多...
148. 排序链表 --力扣 --JAVA

148. 排序链表 --力扣 --JAVA

题目 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 解题思路 先将链表各节点之间的联系断开然后再进行排序&#xff1b;通过List存放节点&#xff0c;对List按照节点的值进行排序&#xff1b;遍历List重新建立联系。 代码展示 class Soluti…
阅读更多...
CefSharp 获取POST(AJAX)、GET消息返回值（request）

CefSharp 获取POST(AJAX)、GET消息返回值（request）

CefSharp作为专门为爬虫工具开发的库比Selenium这种开发目的是页面测试工具然后用来做爬虫的工具要贴心得多。我们操作网页的时候发送或者做了某个动作提交表单之后需要知道我们的动作或者提交是否成功&#xff0c;因为有的页面会因为网络延迟问题提交失败&#xff0c;需要准确…
阅读更多...
Python Pandas处理csv文件常用操作代码

Python Pandas处理csv文件常用操作代码

常识 使用pandas.read_csv从csv文件中读取数据&#xff0c;对于csv中缺失的空值&#xff0c;读进dataframe会自动补为numpy.nan&#xff0c;且数据类型为float 操作 读取csv文件&#xff0c;存储为dataframe数据类型 df pandas.read_csv(csv_path)查看csv文件的dataframe的…
阅读更多...
CPP-SCNUOJ-Problem P27. [算法课动态规划] 戳气球，小白容易理解

CPP-SCNUOJ-Problem P27. [算法课动态规划] 戳气球，小白容易理解

Problem P27. [算法课动态规划] 戳气球 有 n 个气球&#xff0c;编号为0 到 n - 1&#xff0c;每个气球上都标有一个数字&#xff0c;这些数字存在数组 nums 中。 现在要求你戳破所有的气球。戳破第 i 个气球&#xff0c;你可以获得 nums[i−1]nums[i]nums[i1] 枚硬币。 这里的…
阅读更多...
Vue学习计划--Vue2（一）简单了解vue

Vue学习计划--Vue2（一）简单了解vue

Vue2的终止支持时间为2023年12月31日。 在这个矛盾的时间点&#xff0c;还是决定先把vue2的笔记放出来&#xff0c;在Vue2完结后再把Vue3的笔记补上。这样呢&#xff0c;2和3都不落下&#xff0c;也算是来一个启承的作用吧。在工作中呢&#xff0c;旧的项目可以维护&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023