html实现元素拖动替换

效果

在这里插入图片描述

实现

复制粘贴.html即可使用

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>拖动替换</title></head><style>.box {width: 500px;height: 500px;background: gainsboro;border-radius: 10px;}.tuodong {width: 50px;height: 50px;background: dodgerblue;margin: 15px;cursor: pointer;border-radius: 5px;font-size: 14px;line-height: 50px;text-align: center;color: #fff;}</style><body><div id="app"><div class="box" ondrop="handleDrag(event, this)" ondragover="handleDragover(event, this)" ondragleave="handleDragleave(event, this)" id="dropZone"></div><div class="tuodong" id="id1" draggable="true" ondragend="dragEnd(event, this)" ondragstart="dragStart(event, this)">来拖我</div></div></body><script src="js/jquery-3.2.1.min.js"></script><script>function dragStart(event, _serf) {console.log(event.target.id)console.log("拖动")}function dragEnd(event, _serf) {console.log("松开")}function handleDrag(event, _serf) {console.log("你贴我脸上了", event.target.id)document.getElementById(event.target.id).style.background = 'dodgerblue'}function handleDragover(event, _serf) {console.log("移入", event.target.id)document.getElementById(event.target.id).style.background = '#f1f1f1'}function handleDragleave(event, _serf) {console.log("移除", event.target.id)document.getElementById(event.target.id).style.background = 'gainsboro'}// 监听事件添加【阻止网页默认打开文件的动作】window.onload = function() {document.addEventListener("drop", function(e) { //拖到元素释放e.preventDefault();});document.addEventListener("dragleave", function(e) { //拖离元素e.preventDefault();});document.addEventListener("dragenter", function(e) { //拖进元素e.preventDefault();});document.addEventListener("dragover", function(e) { //拖到元素e.preventDefault();});}</script></html>

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

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

相关文章

【python爬虫】7.爬到的数据存到哪里?

文章目录 前言存储数据的方式存储数据的基础知识基础知识&#xff1a;Excel写入与读取基础知识&#xff1a;csv写入与读取项目&#xff1a;存储周杰伦的歌曲信息 复习 前言 上一关我们以QQ音乐为例&#xff0c;主要学习了如何带参数地请求数据&#xff08;get请求&#xff09;…

LeetCode——三数之和(中等)

题目 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复的三元组。 …

Nodejs入门 token校验

Nodejs入门token校验之jsonwebtoken的使用 前言 token校验作为项目里的必要项&#xff0c;其重要性不言而喻&#xff0c;今天介绍一个在Node.js中备受推崇的神奇工具——jsonwebtoken 一、token是什么jsonwebtoken是什么&#xff1f; 在互联网世界中&#xff0c;Token是一种用于…

用Go编写ChatGPT插件

ChatGPT插件平台有望成为影响深远的"下一件大事"&#xff0c;因此对于开发者来说&#xff0c;有必要对ChatGPT插件的开发有一定的了解。原文: Writing a ChatGPT Plugin With Go[1] 我工作的附带福利之一是偶尔可以接触试用一些很酷的新技术&#xff0c;最近的一项技…

18. 四数之和

18. 四数之和 给你一个由 n 个整数组成的数组 nums &#xff0c;和一个目标值 target 。请你找出并返回满足下述全部条件且不重复的四元组 [nums[a], nums[b], nums[c], nums[d]] &#xff08;若两个四元组元素一一对应&#xff0c;则认为两个四元组重复&#xff09;&#xff…

day-01 Docker

一、docker简介 Docker 是一种开源的容器化平台&#xff0c;它可以帮助开发人员将应用程序及其依赖项打包成一个独立的、可移植的容器&#xff0c;而无需担心环境差异和依赖问题。通过使用 Docker&#xff0c;您可以更轻松地创建、分发和运行应用程序&#xff0c;无论是在开发、…

自然语言处理学习笔记(七)————字典树效率改进

目录 1. 首字散列其余二分的字典树 2.双数组字典树 3.AC自动机(多模式匹配) &#xff08;1&#xff09;goto表 &#xff08;2&#xff09;output表 &#xff08;3&#xff09;fail表 4.基于双数组字典树的AC自动机 字典树的数据结构在以上的切分算法中已经很快了&#x…

轴向磁通电驱动解析

轴向磁通电机的技术创新和量产应用&#xff0c;或将有效解决电动汽车领域目前所面临的一些突出难题&#xff0c;比如轻量化、扭矩密度和人们最为关心的续航里程等。在奔驰汽车刚刚发布的Vision One Eleven概念车&#xff0c;以及此前已经面世的法拉利SF90 Stradale、296GTB和迈…

【函数栈帧解析:代码的迷人堆积和无限嵌套】

本章重点 一、何为函数栈帧 二、函数栈帧特性 - 同栈 - 后进先出 三、认识内存空间布局图 四、认识相关寄存器 五、认识相关汇编命令 六、测试代码&#xff1a; 七、函数栈帧全过程 要解决的问题​​​​​​​ 局部变量是怎么创建的&#xff1f;为什么局部变量的值是随机值&am…

使用proxy_pool来为爬虫程序自动更换代理IP | 开源IP代理

1. 前言 之前做爬虫的时候,经常会遇到对于一个网页,使用同一个IP多次会被禁掉IP的问题,我们可以自己手动更换代理IP再继续这个问题但多少会有点麻烦,我对于一个懒人来说,手动更换IP太麻烦,而且也不符合程序员懒惰的美德,于是便有了下面的故事。proxy_pool 是一个开源的代…

block层:8. deadline调度器

Kernel源码笔记目录 block层&#xff1a;1. 提交io block层&#xff1a;2. mq提交io block层&#xff1a;3. plug机制 block层&#xff1a;4. 运行队列 block层&#xff1a;5. 请求分配 block层&#xff1a;6. tag机制 block层&#xff1a;7. 请求下发 block层&#xff1a;8. …

韶音骨传导耳机好不好,韶音骨传导耳机值得入手吗

韶音耳机的质量还是很不错的&#xff0c;其实力相比于百元价位的耳机而言领先了不少&#xff0c;具备多种功能&#xff0c;佩戴起来也是有着舒适性。它自主研发了骨传导音频技术&#xff0c;不过在今年开始&#xff0c;似乎已经将方向开始往运动偏移。 而在韶音的骨传导耳机中&…

git clone 报SSL证书问题

git命令下运行 git config --global http.sslVerify false 然后再进行重新clone代码

设计模式备忘录+命令模式实现Word撤销恢复操作

文章目录 前言思路代码实现uml类图总结 前言 最近学习设计模式行为型的模式&#xff0c;学到了备忘录模式提到这个模式可以记录一个对象的状态属性值&#xff0c;用于下次复用&#xff0c;于是便想到了我们在Windows系统上使用的撤销操作&#xff0c;于是便想着使用这个模式进…

day28 异常

to{}catch{} try{}catch{}的流传输 try {fis new FileInputStream("file-APP\\fos.txt");fos new FileOutputStream("fos.txt");int a ;while ((a fis.read())! -1){fos.write(a);}System.out.println(a); } catch (IOException e) {e.printStackTrace()…

24.排序,插入排序,交换排序

目录 一. 插入排序 &#xff08;1&#xff09;直接插入排序 &#xff08;2&#xff09;折半插入排序 &#xff08;3&#xff09;希尔排序 二. 交换排序 &#xff08;1&#xff09;冒泡排序 &#xff08;2&#xff09;快速排序 排序&#xff1a;将一组杂乱无章的数据按一…

高可用集群介绍

一、高可用集群概念 高可用集群&#xff08; High Availability Cluster, HA 集群&#xff09;&#xff0c;其中高可用的含义是最大限度地可以使用。从集群 的名字上可以看出&#xff0c;此类集群实现的功能是保障用户的应用程序持久、不间断地提供服务。当应用程序出现故障或…

【笔记】PyCharm快捷键大全

PyCharm是一种Python集成开发环境&#xff08;IDE&#xff09;&#xff0c;由JetBrains公司开发。它被认为是Python开发中最强大、最流行的IDE之一。PyCharm具有完整的Python开发工具链&#xff0c;包括先进的代码编辑器、代码分析工具、集成的调试器、版本控制系统集成、自动化…

后端面试话术集锦第 八 篇:redis面试话术

这是后端面试集锦第八篇博文——redis面试话术❗❗❗ 1. 介绍一下redis Redis是一个非关系数据库,我们项目中主要用它来存储热点数据的,减轻数据库的压力,单线程纯内存操作,采用了非阻塞IO多路复用机制,就是单线程监听,我们项目中使用springdata-redis来操作redis。 我…

前端将UTC时间格式转化为本地时间格式-uniapp写法

UTC时间格式是什么 首先我们先简单的了解一下&#xff1a;UTC时间&#xff08;协调世界时&#xff0c;Coordinated Universal Time&#xff09;使用24小时制&#xff0c;以小时、分钟、秒和毫秒来表示时间 HH:mm:ss.SSSHH 表示小时&#xff0c;取值范围为00到23。mm 表示分钟…