js实现拖放效果

dataTransfer对象

说明:dataTransfer对象用于从被拖动元素向放置目标传递字符串数据。因为这个对象是 event 的属性,所以在拖放事件的事件处理程序外部无法访问 dataTransfer。在事件处理程序内部,可以使用这个对象的属性和方法实现拖放功能。

作用 - 提供了剪贴板功能

获取 - 通过事件对象event

方法 - setData(type,data)方法 ,向剪贴板设置(添加)数据
type - 默认为string类型,充当数据标示(ID)
data - 设置的数据, 一定是在源元素事件中使用

方法 - getData(type)方法,从剪贴板中获取数据,在目标元素事件中使用

方法 - clearData(type)方法, -将剪贴板中的数据清除

事件 - dragover和dragleave事件(必须) 两个事件组合实现拖拽效果。

代码示例如下:

window.onload=function(){var ele1=document.querySelector("#myimg");var d1=document.querySelector("#d1");var d2=document.querySelector("#d2");ele1.addEventListener("dragstart",function(){// 获取到源元素使用的数据 - src属性var mysrc=ele1.src;// 将数据设置到dataTransfer对象中event.dataTransfer.setData("text",mysrc);});d2.addEventListener("drop",function(){event.preventDefault();	// a. 阻止页面的默认行为var mysrc=event.dataTransfer.getData("text");// b. 从dataTransfer对象得到数据var img=document.createElement("img");// c. 创建<img>元素,设置一些属性img.src=mysrc;img.width="256";d2.appendChild(img);// d. 将<img>元素添加到id为d2的div元素中event.dataTransfer.clearData("text");// e. 清除dataTransfer对象中的数据内容d1.removeChild(ele1);// f. 将源元素从页面中删除});d2.addEventListener("dragover",function(){event.preventDefault();});d2.addEventListener("dragleave",dragleave);function dragleave(){event.preventDefault();event.dataTransfer.clearData("text");}}

完整demo下载: https://download.csdn.net/download/u010564801/89037997

示例效果如下:将源元素图片拖动至目标元素框内
请添加图片描述

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

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

相关文章

【鸿蒙HarmonyOS开发笔记】使用@Preview装饰器预览组件

概述 ArkTS应用/服务支持组件预览&#xff0c;要求compileSdkVersion为8或以上。组件预览支持实时预览&#xff0c;不支持动态图和动态预览。组件预览通过在组件前添加注解Preview实现&#xff0c;在单个源文件中&#xff0c;最多可以使用10个Preview装饰自定义组件。 Preview…

算法---矩阵的乘法及其运用

相信我们都做过一个题叫斐波那契数列&#xff0c;对于一般的题&#xff0c;n的取值范围通常在1000以内&#xff0c;但是如果你遇到的是下面这题呢&#xff1f; 斐波那契数列 - 洛谷 发现了吗&#xff1f;我的n取值范围连long long都会爆出&#xff0c;所以下面我们通过矩阵乘法…

张驰咨询:光伏产业新质生产力提升咨询方案

光伏产业新质生产力提升咨询方案 一、光伏行业目前发展现状及特点 1、高度竞争 2、技术驱动 3、绿色发展 二、光伏发展新质生产力面临的痛点 1、成本压缩与效率提升并存挑战 2、新技术应用与推广难度 3、国际贸易摩擦影响 4、市场需求波动大 5、政策与补贴依赖性 三、…

第2章 辐射度、光度和色度学基本理论

一、前言 辐射度学&#xff08;radiology&#xff09;是一门以整个电磁波段&#xff08;electromagnetic band&#xff09;的电磁辐射能&#xff08;electromagnetic radiation energy&#xff09;测量为研究对象的科学。计算机图形学中涉及的辐射度学&#xff0c;则集中于整个…

融云:社交泛娱乐出海,地区和赛道如何选?

“出海是这个时代给我们的机遇。”这是当前很多互联网出海人的心声。 走过跌宕起伏的 16 年出海历程&#xff0c;中国出海人现在面对与此前截然不同的市场环境&#xff0c;很多地区蓝海不再&#xff0c;也有不少赛道变得拥挤。 一体两面&#xff0c;如今的社交泛娱乐出海也已…

【TB作品】430单片机,单片机串口多功能通信,Proteus仿真

文章目录 题目功能仿真图程序介绍代码、仿真、原理图、PCB 题目 60、单片机串口多功能通信 基本要求: 设计一串口通信程序,波特率38400,通过RS232与PC机通信。 自动循环发送数据串(设计在程序中) 接收并存储和显示该数据串 在发送端定义10个ASCII码键0-9 按键发送单字节,PC机接…

Redis的安装与启动

一、Linux环境安装&启动Redis 1. 安装步骤 第一步&#xff1a;在官网下载好Redis安装包&#xff0c;上传到Linux中并进行解压到相应&#xff08;如/opt/software/&#xff09;目录中&#xff1b;&#xff08;注意&#xff1a;完成了第二步后&#xff0c;即安装了C/C语言…

「媒体宣传」财经类媒体邀约资源有哪些?-51媒体

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 财经类媒体邀约资源包括但不限于以下几类&#xff1a; 商业杂志和报纸&#xff1a;可以邀请如《财经》、《新财富》、《经济观察报》等主流商业杂志和报纸。这些媒体通常具有较强的品牌影…

54、Qt/对话框、事件机制相关学习20240325

一、完善对话框&#xff0c;点击登录按钮&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后&#xff0c;关闭登录界面&#xff0c;跳转到其他界面 如果账号和密码不匹配&#…

Machine Learning机器学习之随机森林(Random Forests)

目录 前言&#xff1a; 思想与原理&#xff1a; 随机森林分类效果与什么因素有关&#xff1a; 经典的随机森林算法&#xff1a; 一、构建经典随机森林算法 1、思路 2、步骤&#xff1a; 3、代码实现 二、随机森林算法应用 建模步骤 Python代码实现&#xff08;完整代码&#xf…

36.网络游戏逆向分析与漏洞攻防-游戏网络通信数据解析-数据解码器的实现

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 如果看不懂、不知道现在做的什么&#xff0c;那就跟着做完看效果 内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;35.登录成功数据…

Embedding模型提升效果的方法之一:Whitening和pooling

0. 前言 Embedding模型的主流框架基本上分为三类——基于bert结构的&#xff0c;基于GPT结构的和基于T5结构的&#xff0c;当然这些结构都是Transformer的变形。对于Embedding模型&#xff0c;使用bert结构目前看是最好的。有篇论文论文对基于bert的Embedding模型和基于GPT的E…

集合(下)Map集合的使用

文章目录 前言一、Map接口二、Map接口的实现类 1.HashMap类2.TreeMap类总结 前言 Map集合没有继承Collection接口&#xff0c;不能像List集合和Set集合那样直接使用Collection接口的方法。Map集合其自身通过以key到value的映射关系实现的集合&#xff0c;也有相应的许多方法。类…

CUMT linux操作系统课程设计 任务2

先说题目: 调试Linux内核的启动过程&#xff0c;并在Linux 0.11内核进入保护模式之前添加提示信息 //这里吐槽一下&#xff0c;学校发的文档让你用断点去查看运行根本无法操作&#xff0c;报错如下&#xff1a; 所以别管这个报错&#xff0c;先跟着我来 第一题&#xff0c;调试…

各城市宗族文化姓氏占比数据

各城市宗族文化姓氏占比数据 1、指标&#xff1a;省份代码、所属省份、城市代码、所属城市、第1大姓氏、第2大姓氏、第3大姓氏、宗族文化强度 2、方法说明&#xff1a; 根据2005年全国1%的人口调查数据计算。其中第1大姓氏第一大姓人口数/总人口数&#xff0c;宗族文化强度(…

一文700字从0到1教你实现Jmeter分布式压力测试!

之前写过用jmeter做接口测试的文章&#xff0c;本篇我们继续介绍下用jmeter做分布式压力测试的例子。 用jmeter做压力测试&#xff0c;如果只用一台机器&#xff0c;有鉴于线程数的限制和一台机器的性能&#xff0c;可能无法满足压力测试的实际需求&#xff0c;解决这个问题&a…

力扣--并查集1631.最小体力消耗路径

这题将图论和并查集联系起来。把数组每个位置看成图中的一个节点。 这段代码的主要思路是&#xff1a; 遍历地图中的每个节点&#xff0c;将每个节点与其相邻的下方节点和右方节点之间的边加入到边集合中&#xff08;因为从上到下和从下到上他们高度绝对值一样的&#xff0c;…

OpenHarmony之媒体组件模块简介

源码 本文基于OpenAtom OpenHarmony&#xff08;以下简称“OpenHarmony”&#xff09;3.2 Release源码foundation目录下的player_framework&#xff0c;在OpenHarmony 2.0 Release版本当中&#xff0c;这个模块的名字叫媒体组件模块&#xff0c;为了方便理解我们在本文中仍旧延…

VR全景展示:传统制造业如何保持竞争优势?

在结束不久的两会上&#xff0c;数字化经济和创新技术再度成为了热门话题。我国制造产业链完备&#xff0c;但是目前依旧面临着市场需求不足、成本传导压力加大等因素影响&#xff0c;那么传统制造业该如何保持竞争优势呢&#xff1f; 在制造行业中&#xff0c;VR全景展示的应用…

Query2doc——Query改写

大模型LLM最近一年比较火&#xff0c;但是可能由于数据量较大&#xff0c;存在一些矛盾的数据或者质量差的数据&#xff0c;就会导致大模型存在幻视情况&#xff0c;即存在严重不符合事实的情况。随着之而来&#xff0c;RAG&#xff08;Retrieval Augmented Generation&#xf…