JavaScript拖放操作的实现

在页面中设置2个框:一个是被拖放的框,一个是拖放的目的地框。在拖动的时候,只有当鼠标位于拖放的目的地框上方的时候,放开鼠标的时候,被拖放的框,才被移动到鼠标所在的位置;而在其他地方放开鼠标的时候,被拖放的框都要返回原来的位置(即拖放之前的位置)。要显示拖放过程,即拖动过程中,被拖放的框要和鼠标一起移动。

1.实施效果:

2.代码实现 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.drag {width: 50px;height: 50px;background: #1fbb8a;border-radius: 10px;float:right;text-align: center;line-height: 50px;}.target {width: 300px;height: 300px;border: 1px dashed #000;background: #9ff1ff;text-align: center;line-height: 135px;top: 0;right: 0;}</style></head><body><div class="target">target</div><div class="drag" draggable="true">drag</div><script>var drag = document.getElementsByClassName('drag')[0],target = document.getElementsByClassName('target')[0];target.addEventListener('dragover', function (e) {e.preventDefault();//需要阻止dragover的默认行为才会触发drop事件// console.log('dragover');})target.addEventListener('drop', function () {this.appendChild(drag);})</script>
</body></html>

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

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

相关文章

SVG 多边形 <polygon>,矩形<rect>的示例代码

本专栏是汇集了一些HTML常常被遗忘的知识&#xff0c;这里算是温故而知新&#xff0c;往往这些零碎的知识点&#xff0c;在你开发中能起到炸惊效果。我们每个人都没有过目不忘&#xff0c;过久不忘的本事&#xff0c;就让这一点点知识慢慢渗透你的脑海。 本专栏的风格是力求简洁…

WPS或Excel查找A列中有B列没有的值

就这一行代码&#xff1a; 在C列输入&#xff1a; IF(COUNTIF(B:B,A1)>0,"该行A列中值B列有","该行A列中值B列没有")

企业微信将应用安装到工作台

在上篇中介绍了配置小程序应用及指令、数据回调获取第三方凭证&#xff1b; 本篇将介绍如何将应用安装到企业工作台。 添加测试企业 通过【应用管理】->【测试企业配置】添加测试企业。 通过企业微信扫描二维码添加测试企业。 注意&#xff1a;需要扫描的账号为管理员权限…

蓝桥杯单片机综合练习——工厂灯光控制

一、题目 二、代码 #include <reg52.h>sfr AUXR 0x8e; //定义辅助寄存器sbit S5 P3^2; //定义S5按键引脚 sbit S4 P3^3; //定义S4按键引脚unsigned char led_stat 0xff; //定义LED当前状态 unsigned char count 0; //定义50ms定时中断累…

【Docker】从零开始:2.Docker三要素

【Docker】从零开始&#xff1a;2.Docker三要素 DockerDocker支持的系统CentOS DockerDocker三要素Docker镜像(Image):Docker容器(Container):1.从面向对象角度2.从镜像容器角度 Docker仓库(Repository) 总结 Docker docker官网&#xff1a;http://www.docker.com 仓库-Docker…

leetcode 每日一题复盘(11.20~11.26)

leetcode 746 使用最小花费爬楼梯 虽然是简单题但还是要说一下,感觉做题的思路还是不够清晰,好的是知道状态是最低花费,知道围绕所求的目标进行展开,倒推出递推公式 一开始写的递推公式是dp[i]dp[i-1]min(cost[i-2],cost[i-1]),写出了一个类似贪心算法的东西,归根结底还是对dp…

Android13 新增 Stable AIDL接口

问题描述&#xff1a; 我需要在netd aidl 中添加新的接口&#xff1a; 设置网卡MAC地址&#xff1a; void setHardwareAddress(in utf8InCpp String iface, in utf8InCpp String hwAddr); 背景&#xff1a; Android 10 添加了对稳定的 Android 接口定义语言 (AIDL) 的支持&…

机器学习:十大算法快速回顾

一、说明 对于机器学习的是个经典算法&#xff0c;本篇将展示一个回顾&#xff0c;注意&#xff0c;本篇不是具体原理信息介绍&#xff0c;没有代码&#xff0c;但是对于初学者是一个有益的导读。 二. 线性回归 2.1 算法描述 有没有想过数据奇才如何预测未来&#xff1f;输入线…

Linux安装rabbitMq(亲测可用)解决只能本地访问的问题

安装er https://blog.csdn.net/laterstage/article/details/131513793?spm1001.2014.3001.5501下载mq wget --content-disposition "https://packagecloud.io/rabbitmq/rabbitmq-server/packages/el/7/rabbitmq-server-3.10.0-1.el7.noarch.rpm/download.rpm?distro_v…

文章解读与仿真程序复现思路——电力自动化设备EI\CSCD\北大核心《氢耦合区域综合能源系统集群双层博弈随机优化调度策略》

这个标题涉及到复杂的领域&#xff0c;主要包括氢能源、能源系统集群、双层博弈、随机优化和调度策略。我将分步解读这个标题&#xff1a; 氢耦合区域综合能源系统集群&#xff1a; 氢能源&#xff1a; 这指的是使用氢作为能源的系统&#xff0c;可能是指氢燃料电池等。区域综合…

TensorFlow实战教程(二十六)-什么是生成对抗网络GAN?基础原理和代码普及

从本专栏开始,作者正式研究Python深度学习、神经网络及人工智能相关知识。前一篇文章分享了Keras实现经典的深度学习文本分类算法,包括LSTM、BiLSTM、BiLSTM+Attention和CNN、TextCNN。这篇文章将详细介绍生成对抗网络GAN的基础知识,包括什么是GAN、常用算法(CGAN、DCGAN、…

护眼灯买哪种好?考研必备的护眼台灯推荐

家里顶灯太暗了且高度太高&#xff0c;还是原始的LED灯&#xff0c;晚上用着眼睛都有点难受&#xff0c;还好遇到了儿童护眼灯。下面小编为大家介绍下儿童护眼灯哪个牌子好&#xff1f;什么护眼台灯比较专业 1、色温 台灯的色温也是一个需要考虑的因素&#xff0c;所谓的色温其…

【数据结构】图的存储结构及实现(邻接表和十字链表)

一.邻接矩阵的空间复杂度 假设图G有n个顶点e条边&#xff0c;则存储该图需要O&#xff08;n^2) 不适用稀疏图的存储 二.邻接表 1.邻接表的存储思想&#xff1a; 对于图的每个顶点vi&#xff0c;将所有邻接于vi的顶点链成一个单链表&#xff0c;称为顶点vi的边表&#xff08…

海外服务器相较于国内服务器有何特点?亚马逊海外服务器为何零跑全球

随着数字时代的迅猛发展&#xff0c;云计算基础设施的重要性愈发凸显。在这个信息爆炸的全球化时代&#xff0c;很多企业的海外业务的成功往往取决于是否拥有安全、可靠、高性能、可扩展、灵活且全球覆盖的云基础设施&#xff0c;因此对很多企业来说&#xff0c;选择一款优质的…

Selenium IDE录制脚本

文章目录 1.环境搭建1.1 Chrome浏览器安装1.2 Chrome驱动安装1.3 Selenium IDE插件的安装 2.Selenium IDE插件介绍2.1 初始化界面2.2 菜单栏2.3 工具栏2.4 地址栏2.5 测试用例窗口2.6 测试脚本窗口2.7 日志和引用窗口 3.元素定位3.1 通过id进行元素定位3.2 通过name进行元素定位…

笔记本散热怎么做?学会4招,快速散热!

“不知道为什么&#xff0c;我的笔记本总是用着用着就会发热。有时候还会非常的烫。这是为什么呢&#xff1f;应该怎么解决笔记本散热的问题呢&#xff1f;” 随着笔记本性能的提高&#xff0c;散热变得尤为重要。合理的散热不仅可以保持笔记本的稳定性能&#xff0c;还能延长其…

对一个Series序列内的元素逐个扩展同一聚合操作一个序列中共有m个元素,从指定的第n个元素开始,对前i元素进行聚合计算Series.expanding()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 一个序列中共有m个元素 从指定的第n个元素开始 对前i元素进行聚合计算 其中&#xff1a;n < i < m 聚合计算&#xff1a;求最大、平均值等 Series.expanding(n).max() Series.expanding(…

什么是加工制造业ERP系统?加工制造业ERP软件有哪些作用

化工、电子、五金、来料加工等不同性质的加工企业有差异化的业务特点&#xff0c;传统的管理模式难以解决多仓库、多工厂、多门店、多渠道信息统一和实时共享等问题。 另外如何实时掌握车间产能、科学制定生产计划、多门店数据统一和实时同步等问题&#xff0c;是很多加工制造…

【Linux】基本指令

Linux现在已经是绕不开的操作系统&#xff0c;其开源导致的稳定性&#xff0c;安全性等方面遥遥领先。今天我们开始学习Linux操作系统的基本指令 目录 lspwdcdtouchmkdirrmdir && rmmancp ls 语法&#xff1a; ls [选项][目录或文件] 功能&#xff1a;对于目录&#xf…

在回调之间共享数据

可以在 App 中为 UI 组件编写回调函数&#xff0c;以指定用户与其交互时的行为方式。 在具有多个相互依赖的 UI 组件的 App 中&#xff0c;回调函数通常必须访问主 App 函数中定义的数据&#xff0c;或与其他回调函数共享数据。例如&#xff0c;如果创建一个具有列表框的 App&a…