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;则集中于整个…

ARM.day8

1.自己设置温度湿度阈值&#xff0c;当温度过高时&#xff0c;打开风扇&#xff0c;蜂鸣器报警 2.当湿度比较高时&#xff0c;打开LED1灯&#xff0c;蜂鸣器报警 main.c #include "si7006.h" #include "CH1.h" #include "led.h" // 延时函数in…

【Redis】高频面试题

提供五种常见的数据类型&#xff1a;String&#xff08;字符串&#xff09;&#xff0c;Hash&#xff08;哈希&#xff09;&#xff0c;List&#xff08;列表&#xff09;&#xff0c;Set&#xff08;集合&#xff09;、Zset&#xff08;有序集合&#xff09; 文章目录 1、为什…

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

“出海是这个时代给我们的机遇。”这是当前很多互联网出海人的心声。 走过跌宕起伏的 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;跳转到其他界面 如果账号和密码不匹配&#…

Android 8.1 预置应用开机自启动

Android 8.1 预置应用开机自启动 近来接到项目需求&#xff0c;要求将预置应用设置为开机自启动&#xff0c;具体修改参照如下&#xff1a; 方法一&#xff1a; /packages/apps/Launcher3/src/com/android/launcher3/model/LoaderTask.java private void loadWorkspace() {i…

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…

P3393 逃离僵尸岛 bfs +最短路

P3393 逃离僵尸岛 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路&#xff1a;bfs处理出高收费城市&#xff0c;将价格作为点权&#xff0c;将点权当作边权跑最短路。由于到达 v v v&#xff0c;且 v v v不是终点&#xff0c;那么还要再走这个时候需要在该点休息&#xf…

集合(下)Map集合的使用

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

前端实现导出xlsx功能

1.安装xlsx插件 npm install xlsx 2.示例 import XLSX from xlsx;// 示例数据 const data [[Name, Age, Country],[Alice, 25, USA],[Bob, 30, Canada],[Charlie, 28, UK] ];// 创建一个 Workbook 对象 const wb XLSX.utils.book_new(); const ws XLSX.utils.aoa_to_sheet…

前端理论总结(js)——reduce相关应用方法

按属性对object分类 let peple[{name:Alice,age:21},{name: Mex, age: 20},{name:Jane,age:20} }function groupBy (objectArray, property) {return objectArray.reduce(function(pre, cur){let keycur[property]if(!pre[key]){pre[key][]}pre[key].push(cur)return pre},{})…

CCCorelib 点云RANSAC拟合球体(CloudCompare内置算法库)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 RANSAC是一种随机参数估计算法。RANSAC从样本中随机抽选出一个样本子集,使用最小方差估计算法对这个子集计算模型参数,然后计算所有样本与该模型的偏差,再使用一个预先设定好的阈值与偏差比较,当偏差小于阈值时…