html 拖拽事件详解

news2024/11/24 22:24:59

为了使元素可拖拽,需要在标签上设置draggable='true'属性。

文本、图片和链接是默认可以拖放的,它们的draggable属性自动被设置成了true

图片和链接按住鼠标左键选中,就可以拖放。

文本只有在被选中的情况下才能拖放。如果显示设置文本的draggable属性为true,按住鼠标左键也可以直接拖放。

拖拽元素上的事件

给元素设置draggable属性后监听。

语法: <element draggable="true | false | auto" ></element>

  • true: 可以拖动
  • false:禁止拖动
  • auto:默认值,使用浏览器定义的默认行为

在网页中,对于选中文本、图片和链接,浏览器会使用默认的拖动行为。当图片或者链接在拖动时,会自动设置图片或链接的地址为拖动数据(通过dragEvent.dataTransfer.getData('url'),如果拖动的是链接,那么同时也可以通过dragEvent.dataTransfer.getData('text')可获取);如果使用鼠标选中图片后拖动,那就不会设置图片的链接为拖动数据,当选中文本在拖动时,会自动设置文本为拖动数据(通过dragEvent.dataTransfer.getData('text')获取).

<a
  href="https://developer.mozilla.org/static/media/github-mark-small.348586b8904b950b8ea8.svg"
  >https://developer.mozilla.org/static/media/github-mark-small.348586b8904b950b8ea8.svg</a
>
<script>
  const a = document.getElementsByTagName("a")[0];
  a.addEventListener("dragstart", (e) => {
    // 均可以获取链接
    console.log("text: " + e.dataTransfer.getData("text"));
    console.log("url: " + e.dataTransfer.getData("url"));
    e.preventDefault();
  });![请添加图片描述](https://img-blog.csdnimg.cn/0b1a4c8add5445f5b7c4bea6b3196b61.gif)

</script>

链接拖动默认执行:

请添加图片描述

选中链接拖动默认执行:

请添加图片描述

<img
  src="https://developer.mozilla.org/static/media/github-mark-small.348586b8904b950b8ea8.svg"
  width="100px"
  height="100px"
/>

<script>
  const img = document.getElementsByTagName("img")[0];
  img.addEventListener("dragstart", (e) => {
    // 只有getData('url')能获取
    console.log("text: " + e.dataTransfer.getData("text"));
    console.log("url: " + e.dataTransfer.getData("url"));
    e.preventDefault();
  });
</script>

图片拖动默认执行:

请添加图片描述

选中图片后拖动默认执行:

请添加图片描述

默认情况下,只有已选中的文本、图片、链接可以拖动。对其它的元素来说,必须按拖动机制的顺序设置 ondragstart 事件才能正常工作。

设置了draggabletrue的元素不可选中

<div draggable="true">设置了draggable后不可选中</div>
<a
  draggable="true"
  href="https://developer.mozilla.org/static/media/github-mark-small.348586b8904b950b8ea8.svg"
  >https://developer.mozilla.org/static/media/github-mark-small.348586b8904b950b8ea8.svg</a
>
<img
  draggable="true"
  src="https://developer.mozilla.org/static/media/github-mark-small.348586b8904b950b8ea8.svg"
  width="100px"
  height="100px"
/>

设置了draggabletrue不可选中:

请添加图片描述

注意:设置了draggabletrue的元素都不能通过常规的鼠标点击拖动选中。不过可以通过按下Alt键同时点击来选中文本(通过dragEvent.dataTransfer.getData('text')获取)。

draggbale可以在所有元素上使用,包括图片和链接。不过,图片跟链接的draggable默认为true,所以通常只用来设置false来禁止拖动。

链接设置 draggable=false,如果行内同时存在图片,不会触发 dragstart

dragstart

该事件在拖拽元素或被选中的文本上触发,通常用来设置数据。

通过addEventListener或者onDragstart方法进行监听。

<div draggable="true">用于监听dragstart</div>
<script>
  const div = document.getElementsByTagName("div")[0];
  div.addEventListener("dragstart", (event) => {
    console.log("dragstart");
    console.log(event);
  });
  div.ondragstart = (event) => {
    console.log("ondragstart");
    console.log(event);
  };
</script>

请添加图片描述

由于拖动事件会冒泡,因此可以单独监听父元素来获取多个子元素的拖动事件。

<div id="bubble-drag">
  <a
    href="https://developer.mozilla.org/static/media/github-mark-small.348586b8904b950b8ea8.svg"
    >https://developer.mozilla.org/static/media/github-mark-small.348586b8904b950b8ea8.svg</a
  >
  <img
    src="https://developer.mozilla.org/static/media/github-mark-small.348586b8904b950b8ea8.svg"
    width="100px"
    height="100px"
  />
  <h1 draggable="true">拖动事件会冒泡</h1>
</div>
<script>
  const bubbleDrag = document.getElementById("bubble-drag");
  bubbleDrag.addEventListener("dragstart", (e) => {
    console.log(e);
    console.log(e.dataTransfer.getData("text"));
  });
</script>

dragstart事件中,可以设置拖动数据,反馈图片及拖动效应。

拖拉事件用一个DragEvent对象表示,该对象继承 MouseEvent 对象,因此也就继承了 UIEventEvent 对象。DragEvent 对象只有一个独有的属性 DataTransfer,其他都是继承的属性。DataTransfer 属性用来读写拖拉事件中传输的数据

所有的拖动事件都有一个dataTransfer属性用来保存拖动数据。当元素拖动时,数据必须是能表明是哪个元素在被拖动,比如拖动选中文本时,拖动数据就是文本本身,拖动链接时拖动数据就是对应链接的地址。

拖动数据(drag data)包含两个值,数据类型(推荐类型)跟数据值(都是string类型).在拖动期间,通过setData去设置拖动数据。

通过setData设置拖动数据

<h1 draggable="true">通过setData设置拖动数据</h1>
<script>
  const h1 = document.getElementsByTagName("h1")[0];
  h1.addEventListener("dragstart", (e) => {
    e.dataTransfer.setData("text/plain", "设置拖动数据");
    console.log(e.dataTransfer.getData("text"));
  });
</script>

请添加图片描述

一个拖动事件可以设置多个拖动数据。

h1.addEventListener("dragstart", (e) => {
  e.dataTransfer.setData("text/plain", "设置拖动数据");
  e.dataTransfer.setData("text/uri-list", "http://github.com");
  console.log(e.dataTransfer.getData("text"));
  console.log(e.dataTransfer.getData("url"));
});

请添加图片描述

当设置多个数据时,最好有一个text/plain类型作为替补防止有些drop目标不支持其他类型。

如果多次设置同一类型的数据,那么新数据会覆盖旧数据。

使用clearData移除某类型数据或全部数据。
clearData接受一个参数(数据类型),如果没传参数,就删除全部数据。

drag

该事件在拖拽元素上触发,在元素被拖动时反复触发

<h1 draggable="true">监听drag事件</h1>
<script>
  const h1 = document.getElementsByTagName("h1")[0];
  h1.addEventListener("drag", (e) => {
    console.log(e);
  });
</script>

请添加图片描述

dragend

该事件在拖拽元素上触发,在元素拖动完成时(释放鼠标键或按下escape键)触发

<h1 draggable="true">监听dragend事件</h1>
<script>
  const h1 = document.getElementsByTagName("h1")[0];
  h1.addEventListener("dragend", (e) => {
    console.log(e);
  });
</script>

请添加图片描述

可放置元素

对于大多数浏览器页面和应用来说都是不能直接放置拖拽数据的。不过浏览器提供了几个事件用来声明可放置目标。

通过取消dragenterdragover事件的默认执行动作就可以实现元素放置。

dragenter

该事件在拖动目标元素上触发,在拖动元素进入目标元素所占据的屏幕空间时触发

通常应该在这个事件的监听函数中,指定是否允许在当前节点放下(drop)拖拉的数据。如果当前节点没有该事件的监听函数,或者监听函数不执行任何操作,就意味着不允许在当前节点放下数据(dragleavedragoverdrop事件都不会触发)。在视觉上显示拖拉进入当前节点,也是在这个事件的监听函数中设置。

dragleave

该事件在拖动目标元素上触发,在拖动元素没有放下就离开目标元素时触发

dragover

该事件在拖动目标元素上触发,在拖动元素在目标元素内时持续触发

该事件的 target 属性是当前节点。该事件与dragenter事件基本类似,默认会重置当前的拖拉事件的效果(DataTransfer对象的dropEffect属性)为none,即不允许放下被拖拉的节点,所以如果允许在当前节点drop数据,通常会使用preventDefault方法,取消重置拖拉效果为none

drop

当被拖动元素或选中文本在目标元素里放下时触发,一般需要取消浏览器的默认行为。

<h1>拖拽元素</h1>
<div
  style="width: 300px; height: 300px; border: 1px solid black"
  id="drop-target"
>
  可放置元素
</div>
<script>
  const dropTarget = document.getElementById("drop-target");
  dropTarget.addEventListener("dragover", (e) => {
    e.preventDefault();
  });
  dropTarget.addEventListener("drop", (e) => {
    console.log(e);
  });
</script>

注意,如果当前节点不允许drop,即使在该节点上方松开鼠标键,也不会触发该事件。如果用户按下Escape键,取消这个操作,也不会触发该事件。该事件的监听函数负责取出拖拉数据,并进行相关处理

关于拖拉事件,有以下几点注意事项。

  • 拖拉过程只触发以上这些拖拉事件,尽管鼠标在移动,但是鼠标事件不会触发。

  • 将文件从操作系统拖拉进浏览器,不会触发 dragStart 和 dragend 事件。

  • dragenterdragover 事件的监听函数,用来指定可以放下(drop)拖拉的数据。由于网页的大部分区域不适合作为 drop 的目标节点,所以这两个事件的默认设置为当前节点不允许 drop。如果想要在目标节点上 drop 拖拉的数据,首先必须阻止这两个事件的默认行为,或者取消这两个事件

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LinkedIn工具-领英精灵参数怎么设置?

前言&#xff1a; 领英精灵是高端技术人员针对领英平台研发的工具。具有好友分组、备注&#xff0c;一键批量加-好友&#xff0c;批量撤-回邀请&#xff0c;批量群-发消息&#xff0c;批量导出好友资料&#xff0c;批量点-赞、Groups管理七大功能。通过领英精灵可提高领英开发…

Java集合进阶 | Collection接口

本专栏主要是记录学习完本专栏主要是记录学习Java中的知识点&#xff0c;如果刚开始学习Java的小伙伴可以点击下方连接查看专栏 JavaWeb&#xff1a;&#x1f525;JavaWeb Java入门篇&#xff1a; &#x1f525;Java基础学习篇 Java进阶学习篇&#xff08;持续更新中&#xff0…

Three.js入门以及案例(全方位解析)

下载three.js 压缩包 github链接查看所有版本 threejs&#xff1a;https://github.com/mrdoob/three.js/releases 下载即可 常用的文件目录 three.js-文件包 └───build——three.js相关库&#xff0c;可以引入你的.html文件中。│ └───docs——Three.js API文档文件│…

【机器学习算法】模型评估 “神经网络,聚类,向量机,关联规则”算法模型的评估。

模型评估* 数据集的切割 训练-测试数据的方式、交叉验证的方式 我们通常会把数据集切割为训练数据集或者测试数据集&#xff0c;训练数据集用来训练模型用&#xff0c;测试数据集我们一般用来测试模式的实际效能怎么样。 我们在将数据分为训练和测试数据集的时候我们会使用…

go-zero使用consul作为注册中心

目录 在rpc服务中添加配置 导入包&#xff1a; 在rpc服务中添加配置&#xff1a; 引入 Consul config 配置项 user.yml 文件 修改 user.go,将 rpc注册到consul rpc的发现 在api服务中添加配置&#xff1a; 修改api/etc/user.yam 文件 修改 user.yml 修改api/user.go …

@Import的用法

官方定义: https://docs.spring.io/spring-framework/docs/current/reference/html/core.html#spring-core Using the ImportAnnotation Much as the <import/> element is used within Spring XML files to aid in modularizing configurations, the Import annotat…

一文详解ARP报文格式及工作原理

ARP&#xff08;地址解析协议&#xff09;作用&#xff1a;将目的IP解析为目的MAC&#xff0c;用于二层帧结构的目标MAC封装&#xff0c;数据必须封装为帧才能够被网卡发送出去&#xff0c;帧中必须包含MAC。报文格式&#xff1a;ARP报文不能穿越路由器&#xff0c;不能被转发到…

基于飞桨实现钢铁企业废钢判级迈入智能化道路

目前&#xff0c;国家“双碳”战略与“数据智能”环境正驱动着钢铁企业废钢判级迈入智能化道路。针对生产过程中带来高能耗和高污染问题&#xff0c;企业通过使用飞桨用友废钢智能判级系统&#xff0c;助力提升自身经济效益和安全生产水平。 建设背景 目前&#xff0c;国家“双…

如何在IDEA中创建Web项目

&#x1f44c; 棒棒有言&#xff1a;也许我一直照着别人的方向飞&#xff0c;可是这次&#xff0c;我想要用我的方式飞翔一次&#xff01;人生&#xff0c;既要淡&#xff0c;又要有味。凡事不必太在意&#xff0c;一切随缘&#xff0c;缘深多聚聚&#xff0c;缘浅随它去。凡事…

QT入门Buttons之QToolButton

目录 一、界面布局介绍 1、布局器中的位置及使用 2、控件的界面属性 2.1对象名称和大小设置 2.2对象文本设置和鼠标箭头更改 2.3、扁平化样式 二、属性功能介绍 1、显示箭头属性 2、按钮风格 3、添加默认action属性 三、Demo展示 此文为作者原创&#xff0c;转载请标…

Web前端:提高React Native应用程序性能的技巧

不可否认&#xff0c;React Native是开发混合应用的未来。它提供了可扩展性、灵活性、速度、敏捷性、成本效益和卓越的性能。难怪这么多成功的公司依赖React Native来构建他们的应用程序。毕竟&#xff0c;在互联网时代&#xff0c;每个企业都需要一个高性能的应用程序来满足客…

PCB如何进行阻抗设计经验总结

&#x1f3e1;《总目录》 目录1&#xff0c; 什么是阻抗匹配2&#xff0c;为何要阻抗匹配3&#xff0c;阻抗设计经验1&#xff0c; 什么是阻抗匹配 阻抗是指电路中两点间电阻&#xff0c;电感和电容的总称。而阻抗匹配是指&#xff0c;传输线及传输线两端的电子元器件的输入或输…

Canvas(HTML 5 元素)之绘制曲线图形

文章目录参考描述模板圆形圆形半圆形互补弧形arc()arcTo()二次贝塞尔曲线三次贝塞尔曲线参考 项目描述搜索引擎BingCanvas 中文网CanvasRenderingContext2DW3schoolHTML Canvas 参考手册从 0 到 1&#xff1a;HTML 5 Canvas 动画开发莫振杰 描述 项目描述Edge109.0.1518.70 (…

1.Java基础入门

目录 一.java概述 1.1 java语言发展史 1.2 为什么用Java 1.3 Java能做什么 1.4 Java技术体系 二.Java快速入门 2.1 如何使用Java 2.2 JVM&#xff0c;JRE&#xff0c;JDK 2.2.1 JVM 2.2.2 JRE 2.2.3 JDK 2.3 JDK的下载和安装 2.3.1 JDK的下载 2.3.2 JDK的安装 2.3.3 如何验证JD…

git版本回滚详解

写在前面&#xff1a;本文图片中出现的git st, git co分别是git status和git checkout的简写&#xff0c;使用中可以自行设置git config --global alias.st statusgit config --global alias.co checkout查看git配置文件 vim ~/.gitconfig1 工作区内的回滚操作当工作区的文件发…

Android 传感器概述(二)

Android 传感器概述&#xff08;二&#xff09;Android 传感器概述&#xff08;二&#xff09;运动传感器使用重力传感器使用线性加速度计使用旋转矢量传感器使用有效运动传感器使用计步器传感器使用步测器传感器使用原始数据使用加速度计使用陀螺仪使用未经校准的陀螺仪Androi…

【数据结构】动图详解单向链表

目录 1.什么是链表 1.问题引入 2. 链表的概念及结构 3. 问题解决 2.单向链表接口的实现 1.接口1&#xff0c;2---头插&#xff0c;尾插 2. 接口3&#xff0c;4---头删&#xff0c;尾删 3. 接口5---查找 4. 接口6&#xff0c;7---插入&#xff0c;删除 5. 接口8---打印 6. 注意…

CVE-2021-36934提权复现

CVE-2021-369342021年7 月 20 日&#xff0c;微软确认了一个新的本地提权漏洞(CVE-2021-36934)&#xff0c;被称为HiveNightmare。该漏洞由于Windows中多个系统文件的访问控制表(ACL)过于宽松&#xff0c;使得任何标准用户都可以从系统卷影副本中读取包括SAM、SYSETM、SECURITY…

Windows系统运行iOS设备管理软件iMazing2023

iMazing2023免费版是一款运行在Windows系统上的iOS设备管理软件&#xff0c;软件功能非常强大&#xff0c;界面简洁清晰&#xff0c;操作方便快捷&#xff0c;设计的非常有人性化&#xff0c;iMazing官方版为用户提供了多种设备管理功能&#xff0c;每一位用户都能以自己的形式…

MyISAM和InnoDB存储引擎的区别

目录前言存储引擎区别事务外键表单的存储数据查询效率数据更新效率如何选择前言 MyISAM和InnoDB是使用MySQL最常用的两种存储引擎&#xff0c;在5.5版本之前默认采用MyISAM存储引擎&#xff0c;从5.5开始采用InnoDB存储引擎。 存储引擎 存储引擎是&#xff1a;数据库管理系统…