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.rhkb.cn/news/287789.html

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

相关文章

科学认识并正确运用人工智能技术赋能国际传播

以下文章来源&#xff1a;学习时报 加强国际传播能力建设&#xff0c;全面提升国际传播效能&#xff0c;形成同我国综合国力和国际地位相匹配的话语权&#xff0c;已成为实现中国式现代化需要解决好的一个重大问题。文生视频模型Sora&#xff0c;是继ChatGPT之后又一推动传播智…

鉴源论坛丨形式化工程方法之需求建模(下)

作者 | 杨坤 上海控安可信软件创新研究院系统建模组 版块 | 鉴源论坛 观模 引言&#xff1a;需求建模是一种从源头确保软件质量的重要手段。需求建模可分为需求规约和需求确认两个部分&#xff0c;前者通过严格设计的形式化语言精确地将需求文档转换为了形式化规约&#xff0…

手撕LRU 最近最少使用缓存淘汰策略 + LinkedHashMap

LRU 最近最少使用缓存淘汰策略 1 LRU 算法就是一种缓存淘汰策略2 手撕LRU3 LinkedHashMap 常见面试题 1 LRU 算法就是一种缓存淘汰策略 计算机的缓存容量有限&#xff0c;如果缓存满了就要删除一些内容&#xff0c;给新内容腾位置。但问题是&#xff0c;删除哪些内容呢&#x…

“Kimi概念”降温,长文本“担不起”大模型的下一步

Kimi火了…… 这是这波AI浪潮中&#xff0c;国内创业公司第一次真正“破圈”。最明显的标志是&#xff0c;在二级市场中&#xff0c;Kimi已被市场作为一个概念板块来对待&#xff0c;它们被称之为“Kimi概念股”。在之前爆炒的板块中&#xff0c;可能有华为产业链、苹果产业链&…

SV-7045VP sip网络草坪音箱 室外网络广播POE供电石头音箱

SV-7045VP sip网络草坪音箱 室外网络广播POE供电石头音箱 18123651365微信 SV-7045VP SIP网络草坪音箱 sip POE石头音箱 描述 SV-7041VP是深圳锐科达电子有限公司的一款防水网络草坪音箱&#xff0c;具有10/100M以太网接口&#xff0c;可将网络音源通过自带的功放和喇叭输出…

ESD保护二极管ESD9B3.3ST5G 以更小的空间实现强大的保护 车规级TVS二极管更给力

什么是汽车级TVS二极管&#xff1f; TVS二极管是一种用于保护电子电路的电子元件。它主要用于电路中的过电压保护&#xff0c;防止电压过高而损坏其他部件。TVS二极管通常被称为“汽车级”是因为它们能够满足汽车电子系统的特殊要求。 在汽车电子系统中&#xff0c;由于车辆启…

机器学习——神经网络简单了解

一、神经网络基本概念 神经网络可以分为生物神经网络和人工神经网络 (1)生物神经网络,指的是生物脑内的神经元、突触等构成的神经网络&#xff0c;可以使生物体产生意识&#xff0c;并协助生物体思考、行动和管理各机体活动。 (2)人工神经网络,是目前热门的深度学习的研究…

【第二部分--Python之基础】02

二、运算符与程序流程控制 1、运算符 1.1 算术运算符 算术运算符用于组织整数类型和浮点类型的数据&#xff0c;有一元运算符和二元运算符之分。 一元算术运算符有两个&#xff1a;&#xff08;正号&#xff09;和-&#xff08;负号&#xff09;&#xff0c;例如&#xff1…

【C++11】thread线程库

【C11】thread线程库 目录 【C11】thread线程库thread类的简单介绍函数指针lambda表达式常用在线程中 线程函数参数join与detach利用RAII思想来自动回收线程 原子性操作库(atomic)atomic中的load函数&#xff1a;atomic中对变量进行原子操作的一些函数 CAS(Compare-And-Swap)无…

Git学习笔记之基础

本笔记是阅读《git pro》所写&#xff0c;仅供参考。 《git pro》网址https://git-scm.com/book/en/v2 git官网 https://git-scm.com/ 一、git起步 1.1、检查配置信息 git config --list查看所有的配置以及它们所在的文件 git config --list --show-origin可能有重复的变量名…

科技云报道:从“算力核弹”到生成式AI,新纪元还有多远?

科技云报道原创。 “我们需要更大的GPU”&#xff01; 3月19日凌晨&#xff0c;一年一度的“AI风向标”重磅会议——GTC 2024如期而至。 英伟达CEO黄仁勋在大会上发布了包括新一代加速计算平台NVIDIA Blackwell、Project GR00T人形机器人基础模型、Omniverse Cloud API、NVI…

【prompt六】MaPLe: Multi-modal Prompt Learning

1.motivation 最近的CLIP适应方法学习提示作为文本输入,以微调下游任务的CLIP。使用提示来适应CLIP(语言或视觉)的单个分支中的表示是次优的,因为它不允许在下游任务上动态调整两个表示空间的灵活性。在这项工作中,我们提出了针对视觉和语言分支的多模态提示学习(MaPLe),以…

大数据开发(日志离线分析项目)

大数据开发&#xff08;日志离线分析项目&#xff09; 一、项目需求1、使用jqueryecharts的方式调用程序后台提供的rest api接口&#xff0c;获取json数据&#xff0c;然后通过jquerycss的方式进行数据展示。工作流程如下&#xff1a;2、七大角度1、用户基本信息分析模块2、浏览…

【计算机视觉】三、图像处理——实验:图像去模糊和去噪、提取边缘特征

文章目录 0. 实验环境1. 理论基础1.1 滤波器&#xff08;卷积核&#xff09;1.2 PyTorch:卷积操作 2. 图像处理2.1 图像读取2.2 查看通道2.3 图像处理 3. 图像去模糊4. 图像去噪4.1 添加随机噪点4.2 图像去噪 0. 实验环境 本实验使用了PyTorch深度学习框架&#xff0c;相关操作…

openGauss学习笔记-252 openGauss性能调优-使用Plan Hint进行调优-Scan方式的Hint

文章目录 openGauss学习笔记-252 openGauss性能调优-使用Plan Hint进行调优-Scan方式的Hint252.1 功能描述252.2 语法格式252.3 参数说明252.4 示例 openGauss学习笔记-252 openGauss性能调优-使用Plan Hint进行调优-Scan方式的Hint 252.1 功能描述 指明scan使用的方法&#…

【计算机操作系统】深入探究CPU,PCB和进程工作原理

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…

【二叉树】Leetcode 102. 二叉树的层序遍历【中等】

二叉树的层序遍历 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09; 示例1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;[[3],[9,20],[15,7]] 解题思路…

elasticsearch基础应用

1._cat接口 | _cat接口 | 说明 | | GET /_cat/nodes | 查看所有节点 | | GET /_cat/health | 查看ES健康状况 | | GET /_cat/master | 查看主节点 | | GET /_cat/indices | 查看所有索引信息 | es 中会默认提供上面的几个索引&#xff0c;表头…

Spring 自定义 CustomQualifier

为什么写这篇文章 Spring 支持类型注入&#xff0c;并且可以通过Qualifier 或者Mate 调整类型注入的范围。但是通过自定义注解结合现有的 Qualifier 使用起来有种种困难。 将 Qualifier 融合在自定义注解中&#xff0c;在使用 AliasFor 遇到问题仅仅检查注解中的一部分内容是否…

外包干了10天,技术倒退明显

先说情况&#xff0c;大专毕业&#xff0c;18年通过校招进入湖南某软件公司&#xff0c;干了接近6年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&#xf…