当前位置： 首页 > news >正文

Html新增属性之拖拽（drag）

news 2026/4/2 0:27:48

元素在拖放过程中触发的事件
HTML5中，只要将元素的 draggable 属性设置为 true 就可以实现拖放功能，在拖放过程中，触发了多个事件，如下：

  1. dragstart:事件主体是被拖放元素，在开始拖放被拖放元素时触发。
  2. drag：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
  3. dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
  4. dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
  5. dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
  6. drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
  7. dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。
以上我们看到拖动总共有7个事件，其中事件主体是拖放元素的是，dragstart（开始拖动） 、drag（正在拖放）、dragend（拖放结束），其他4个事件主体都是目标元素，进入、移动、离开、完全进入四个状态。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML5实现拖拽操作</title><style>.album {border: 3px dashed #ccc;float: left;margin: 10px;min-height: 100px;padding: 10px;width: 220px;}img {width: 200px;height: 50px;}</style>
</head><body><div id="info"><h2>可将照片直接拖到垃圾箱中</h2></div><div id="album" class="album"><h2>相册</h2><img draggable="true" id="img1" src="./1.jpg" /><img draggable="true" id="img2" src="./2.jpg" /><img draggable="true" id="img3" src="./1.jpg" /></div><div id="trash" class="album"><h2>回收站</h2></div><script>// function init() {var info = document.getElementById("info");var src = document.getElementById("album");//开始拖放操作src.ondragstart = function (e) {console.log('ssssssssssdddd', e, e.target.id);var dragImgId = e.target.id;//获得被拖动元素var dragImg = document.getElementById(dragImgId);//拖放操作结束dragImg.ondragend = function (e) {info.innerHTML = "可将照片直接拖到回收站";};e.dataTransfer.setData("text", dragImgId);};//拖放过程中src.ondrag = function (e) {info.innerHTML = "照片正在被拖动";}//获得拖放的目标元素var target = document.getElementById("trash");//取消默认事件target.ondragenter = function (e) {e.preventDefault();}target.ondragover = function (e) {e.preventDefault();}target.ondrop = function (e) {var draggedID = e.dataTransfer.getData("text");//获取相册中的DOM对象var oldElem = document.getElementById(draggedID);//从相册DIV中删除该照片的节点oldElem.parentNode.removeChild(oldElem);//将被拖动的照片DOM节点添加到垃圾桶DIV中；target.appendChild(oldElem);info.innerHTML = "可将照片直接拖到回收站";e.preventDefault();}// }</script>
</body></html>

相关文章：

Html新增属性之拖拽（drag）

元素在拖放过程中触发的事件 HTML5中&#xff0c;只要将元素的 draggable 属性设置为 true 就可以实现拖放功能&#xff0c;在拖放过程中&#xff0c;触发了多个事件&#xff0c;如下&#xff1a; dragstart:事件主体是被拖放元素&#xff0c;在开始拖放被拖放元素时触发。dra…...

编程日记 2023/3/9 20:09:14

C/C++开发，无可避免的多线程（篇二）.thread与其支持库

一、原子类型与原子操作 1.1 原子类型与操作介绍 在前一篇博文中&#xff0c;多线程交互示例代码中&#xff0c;给出了一个原子类型定义&#xff1a; // 原子数据类型 atomic_llong total {0}; 那么什么事原子数据类型呢&#xff0c;和c的基础数据类型有什么不同呢&#xff1a…...

编程日记 2023/3/9 20:08:09

mysql数据库之表级锁

表级锁&#xff0c;每次操作锁住整张表。锁定粒度大&#xff0c;发生所冲突的概率最高&#xff0c;并发度最低。应用在myisam、innodb、bdb等存储引擎中。 一、表级锁分类。 1、表锁 2、元数据锁&#xff08;meta data lock&#xff0c;MDL&#xff09; 3、意向锁 二、表锁…...

编程日记 2023/3/9 20:07:07

Python - Pandas - 数据分析(2)

Pandas数据分析2前言常用的21种统计方法describe()&#xff1a;numeric_only&#xff1a;偏度skewness&#xff1a;功能&#xff1a;含义&#xff1a;计算公式&#xff1a;演示&#xff1a;峰度值&#xff1a;用途&#xff1a;数值&#xff1a;计算公式&#xff1a;演示&#x…...

编程日记 2023/4/15 23:20:58

我的十年编程路 2019年篇

随着2018年&#xff0c;三星天津研究院的裁撤&#xff0c;我选择了到广州的三星研究院工作&#xff0c;与最心爱的她开始一起生活。 这一年的开始&#xff0c;我注册了博客园。和2014年类似&#xff0c;在刚注册不久&#xff0c;我写了一篇题为《全新开始&#xff0c;全心出发…...

编程日记 2023/4/15 23:20:53

（蓝桥真题）剪格子（搜索+剪枝）

样例1输入&#xff1a; 3 3 10 1 52 20 30 1 1 2 3 样例1输出&#xff1a; 3 样例2输入&#xff1a; 4 3 1 1 1 1 1 30 80 2 1 1 1 100 样例2输出&#xff1a; 10 分析&#xff1a;这道题目我们直接从(1,1)点开始进行dfs搜索即可&#xff0c;但是需要注意一点的是我们搜…...

编程日记 2023/4/15 23:20:47

Kalman Filter in SLAM (3) ——Extended Kalman Filter (EKF, 扩展卡尔曼滤波)

文章目录1. 线性系统的 Kalman Filter 回顾2. Extended Kalman Filter 之 DR_CAN讲解笔记2.1. 非线性系统2.2. 非线性系统线性化2.2.1. 状态方程f(xk)f(x_k)f(xk​)在上一次的最优估计状态x^k−1\hat{x}_{k-1}x^k−1​处线性化2.2.2. 观测方程h(xk)h(x_k)h(xk​)在这一次的预测…...

编程日记 2023/4/15 23:20:40

关于vertical-align的几问

vertical-align属性可以给我讲解一下吗&#xff1f; 当使用table-cell布局或inline元素时&#xff0c;可以使用CSS的vertical-align属性控制元素的垂直对齐方式。该属性可应用于元素本身以及其父元素&#xff08;例如&#xff0c;td、th、tr和table&#xff09;。 以下是vertic…...

编程日记 2023/4/13 19:22:33

【拜占庭将军问题】这一计谋，可以让诸葛丞相兴复汉室

我们都知道&#xff0c;诸葛亮第一次北伐是最可能成功的&#xff0c;魏国没有防备&#xff0c;还策反了陇西&#xff0c;陇西有大量的马匹可以装备蜀国骑兵&#xff0c;可惜街亭一丢&#xff0c;那边就守不住了 当时我不在&#xff0c;只能作诗一首~ 如果穿越过去&#xff0c;…...

编程日记 2023/4/15 23:20:37

【Linux】 -- make/Makefile

目录 Linux项目自动化构建工具 – make/Makefile 背景 依赖关系和依赖方法 多文件编译 项目清理 make原理 Linux项目自动化构建工具 – make/Makefile 背景 一个工程的源文件不计其数 按照其类型、功能、模块分别放在若干个目录当中 Makefile定义了一系列的规则来指定&…...

编程日记 2023/4/15 23:20:31

Forter 对支付服务商应对欺诈的四个建议和Gartner的两个关键结论

Gartner新版2023年度《线上欺诈检测市场指南》发布恰逢其时&#xff0d;企业正面临来自专业黑产和欺诈者与日俱增的压力。而在2023年&#xff0c;许多商户将调整反欺诈策略&#xff0c;对拒付率和转化率进行更严格的监测&#xff0c;以最大限度减少损失并增加营收。以下是Gartn…...

编程日记 2023/4/15 23:20:29

ANR系列（二）——ANR监听方案之IdleHandler

前言 关于IdleHandler&#xff0c;比较多同学错误地认为&#xff0c;这个Handler的作用是主线程空闲状态时才执行它&#xff0c;那么用它做一些耗时操作也没所谓。可是IdleHandler在主线程的MessageQueue中&#xff0c;执行queueIdle()默认当然也是执行在主线程中的&#xff0…...

编程日记 2023/4/15 23:20:23

数学小课堂：数学和自然科学的关系（数学方法，让自然科学变成科学体系。）

文章目录 引言I 数学方法，让自然科学变成科学体系。1.1 天文学1.2 博物学1.3 化学1.4 医药学1.5 物理学II 自然科学的升华过程III 数学方法的意义引言 19世纪初，英国人把采用实验的方法，系统地构造和组织知识，解释和预测自然的学问称为科学。 科学研究的是自然现象和自然…...

编程日记 2023/4/15 23:20:17

[蓝桥杯 2020 省 A1] 分配口罩

思路比较容易想到&#xff0c;因为口罩全部只有15批&#xff0c;因此直接暴力dfs搜索即可 //dfs #include<bits/stdc.h> using namespace std; int ans 9999; int num[] {9090400, 8499400, 5926800, 8547000, 4958200, 4422600, 5751200, 4175600, 6309600, 5865200, …...

编程日记 2023/4/15 23:20:12

第五章：C语言数据结构与算法之双向带头循环链表

系列文章目录 文章目录系列文章目录前言一、哨兵位的头节点二、双向链表的结点三、接口函数的实现1、创建结点2、初始化3、尾插与尾删4、头插与头删5、打印6、查找7、随机插入与随机删除8、判空、长度与销毁四、顺序表和链表的对比1. 不同点2. 优缺点五、缓存命中1、缓存2、缓存…...

编程日记 2023/3/9 19:54:26

一文带你了解，前端模块化那些事儿

文章目录前端模块化省流&#xff1a;chatGPT 总结一、参考资料二、发展历史1.无模块化引出的问题:横向拓展2.IIFE3.Commonjs(cjs)4.AMD引出的问题&#xff1a;5.CMD6.UMD7.ESM往期精彩文章前端模块化 省流&#xff1a;chatGPT 总结 该文章主要讲述了前端模块化的发展历史和各个…...

编程日记 2023/3/9 19:53:23

（六十五）大白话设计索引的时候，我们一般要考虑哪些因素呢？（中）

今天我们继续来说一下&#xff0c;在设计索引的时候要考虑哪些因素。之前已经说了&#xff0c;你设计的索引最好是让你的各个where、order by和group by后面跟的字段都是联合索引的最左侧开始的部分字段&#xff0c;这样他们都能用上索引。 但是在设计索引的时候还得考虑其他的…...

编程日记 2023/3/9 19:52:20

Spring事务管理

文章目录1 事务1.1 需求1.2 原因分析1.3 错误解决1.4 yml配置文件中开启事务管理日志1 事务 1.1 需求 当部门解散了不仅需要把部门信息删除了&#xff0c;还需要把该部门下的员工数据也删除了。可当在删除员工数据出现异常时&#xff0c;就不会执行删除员工操作&#xff0c;出…...

编程日记 2023/3/9 19:51:17

数字化工厂装配线生产管理看板系统

电力企业业务复杂&#xff0c;组织结构复杂&#xff0c;不同的业务数据&#xff0c;管理要求也不尽相同。生产管理看板系统针对制造企业的生产应用而开发&#xff0c;能够帮助企业建立一个规范准确即时的生产数据库。企业现状&#xff1a;1、计划不清晰&#xff1a;生产计划不能…...

编程日记 2023/4/12 0:52:30

vxe-grid 全局自定义filter过滤器，支持字典过滤

一、vxe-table的全局筛选器filters的实现 官网例子&#xff1a;https://vxetable.cn/#/table/renderer/filter 进入之后&#xff1a;我们可以参照例子自行实现&#xff0c;也可以下载它的源码&#xff0c;进行调整 下载好后并解压&#xff0c;用vscode将解压后的文件打开。全局…...

编程日记 2023/3/9 19:49:09

4步攻克Fiji在macOS系统的启动难题：从诊断到长效维护的全方位解决方案

4步攻克Fiji在macOS系统的启动难题&#xff1a;从诊断到长效维护的全方位解决方案 【免费下载链接】fiji A "batteries-included" distribution of ImageJ :battery: 项目地址: https://gitcode.com/gh_mirrors/fi/fiji 问题定位&#xff1a;精准识别Fiji启动…...

编程新知 2026/4/2 0:18:54

重构求职效率：boss_batch_push批量投递工具的颠覆性价值

重构求职效率&#xff1a;boss_batch_push批量投递工具的颠覆性价值 【免费下载链接】boss_batch_push Boss直聘批量投简历&#xff0c;解放双手 项目地址: https://gitcode.com/gh_mirrors/bo/boss_batch_push boss_batch_push是一款专为Boss直聘平台设计的开源自动化投…...

编程新知 2026/4/2 0:06:45

成为技术专家的捷径？不，只有长期主义的坚持

在软件测试领域&#xff0c;我们常常被一种“速成”的幻象所包围。铺天盖地的培训广告承诺“三个月精通自动化测试”、“六周成为性能测试专家”&#xff0c;各种“一招鲜”的测试工具和“万能”的测试框架被包装成通往成功的捷径。对于身处其中、渴望突破职业瓶颈的测试工程师…...

编程新知 2026/4/1 23:14:03

火影AI绘画实战：用忍者绘卷Z-Image Turbo生成鸣人、佐助角色图教程

火影AI绘画实战&#xff1a;用忍者绘卷Z-Image Turbo生成鸣人、佐助角色图教程 1. 教程概述与准备工作 如果你是火影忍者的粉丝&#xff0c;现在可以通过AI技术轻松生成你最喜欢的角色图像。本教程将带你使用"忍者绘卷Z-Image Turbo"这个专门为火影风格优化的AI绘画…...

编程新知 2026/4/1 21:30:31

Phi-4-mini-reasoning推理模型5分钟快速上手：数学题逻辑题一键解答

Phi-4-mini-reasoning推理模型5分钟快速上手&#xff1a;数学题逻辑题一键解答 1. 为什么选择Phi-4-mini-reasoning&#xff1f; 如果你经常需要解决数学题、逻辑题或者需要一步步分析的问题&#xff0c;Phi-4-mini-reasoning就是为你量身定制的AI助手。这个模型不像那些通用…...

编程新知 2026/4/1 21:02:07

InoDriverShop参数设置避坑指南：如何避免伺服系统调试中的常见错误

InoDriverShop参数设置避坑指南&#xff1a;如何避免伺服系统调试中的常见错误 伺服系统调试是工业自动化领域中的关键环节&#xff0c;而InoDriverShop作为一款功能强大的伺服驱动配置工具&#xff0c;其参数设置的准确性直接影响到设备的运行性能。本文将深入剖析新手工程师…...

编程新知 2026/4/1 20:27:49

OpenJSCAD.org与3D打印完美结合：从代码到实物的完整工作流程

OpenJSCAD.org与3D打印完美结合&#xff1a;从代码到实物的完整工作流程 【免费下载链接】OpenJSCAD.org JSCAD is an open source set of modular, browser and command line tools for creating parametric 2D and 3D designs with JavaScript code. It provides a quick, pr…...

编程新知 2026/4/1 19:07:00

终极指南：Brontes区块链分析引擎的Cargo.toml依赖管理策略

终极指南&#xff1a;Brontes区块链分析引擎的Cargo.toml依赖管理策略 【免费下载链接】brontes A blazingly fast general purpose blockchain analytics engine specialized in systematic mev detection 项目地址: https://gitcode.com/GitHub_Trending/br/brontes B…...

编程新知 2026/4/1 19:00:56

国密双证书体系深度解读：为什么你的GMTLS客户端需要两个证书？从ECC到ECDHE模式全解析

国密双证书体系深度解析&#xff1a;从设计哲学到工程实践 当开发者第一次接触国密GMTLS协议时&#xff0c;最令人困惑的莫过于那个看似"多余"的第二个证书。为什么在标准TLS中运行良好的单证书体系&#xff0c;到了国密环境中就需要拆分成加密证书和签名证书&#x…...

编程新知 2026/4/1 18:21:15

危废尾气治理厂家怎么选？CO超低排放技术与全场景危废焚烧烟气治理解决方案

随着我国危废处置行业监管体系持续完善&#xff0c;《危险废物焚烧污染控制标准》&#xff08;GB 18484-2020&#xff09;对危废焚烧烟气中一氧化碳&#xff08;CO&#xff09;等污染物设置了明确排放限值&#xff0c;北京、海南等多地更是出台严于国标的地方标准&#xff0c;其…...

编程新知 2026/4/1 17:22:35