js原生手写一个拖拽小功能

先上效果图

在这里插入图片描述

附上代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .four {
      width: 200px;
      height: 100px;
      background-color: #00f;
      position: relative;
    }
  </style>
</head>

<body>
  <div class="four" style="top:0;left:0"></div>
  <script>
    var div = document.getElementsByTagName('div')[0];
    function drag() {
      var disX,
        disY;
      div.addEventListener('mousedown', function (e) {
        var e = e || window.event;
        disX = e.pageX - parseInt(div.style.left);
        disY = e.pageY - parseInt(div.style.top);
        document.addEventListener('mousemove', move);
        document.addEventListener('mouseup', function (e) {
          document.removeEventListener('mousemove', move);
        })
      })
      function move(e) {
        var e = e || window.event;
        div.style.left = (e.pageX - disX) + 'px';
        div.style.top = e.pageY - disY + 'px';
      }
    }
    drag()
  </script>
</body>

</html>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

check startup检查各种资源文件

check startup检查各种资源文件

check startup 命令功能 check startup命令用来检查各种资源文件&#xff08;paf文件、补丁包、启动软件、配置文件&#xff09;是否正确。 命令格式 check startup [ crc ] [ next ] 参数说明 参数参数说明取值 crc 对资源文件进行CRC校验。 - next 检查下一次启动的各…
阅读更多...
Git系列：Git Switch 高效使用技巧

Git系列：Git Switch 高效使用技巧

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…
阅读更多...
用标准的GNU/Linux命令替换Alpine上的精简版命令

用标准的GNU/Linux命令替换Alpine上的精简版命令

Alpine Linux 是一个基于 musl libc 和 busybox 的轻量级Linux发行版&#xff0c;busybox 实现了很多常用类Unix命令的精简版&#xff0c;特点是体积很小&#xff0c;舍弃了很多不常用参数&#xff0c;我们简单对比一下标准Linux自带的 date 命令 和 Alpine下默认的 date 命令便…
阅读更多...
Golang | Leetcode Golang题解之第76题最小覆盖子串

Golang | Leetcode Golang题解之第76题最小覆盖子串

题目&#xff1a; 题解&#xff1a; func minWindow(s string, t string) string {ori, cnt : map[byte]int{}, map[byte]int{}for i : 0; i < len(t); i {ori[t[i]]}sLen : len(s)len : math.MaxInt32ansL, ansR : -1, -1check : func() bool {for k, v : range ori {if c…
阅读更多...
每日两题 / 138. 随机链表的复制 148. 排序链表（LeetCode热题100）

每日两题 / 138. 随机链表的复制 148. 排序链表（LeetCode热题100）

138. 随机链表的复制 - 力扣&#xff08;LeetCode&#xff09; 用哈希表记录原链表中的节点是否被复制过 遍历原链表并通过哈希表维护新链表 /* // Definition for a Node. class Node { public:int val;Node* next;Node* random;Node(int _val) {val _val;next NULL;rand…
阅读更多...
Glowroot：Java应用的性能守护神，让监控变得既轻松又有趣！

Glowroot：Java应用的性能守护神，让监控变得既轻松又有趣！

Glowroot&#xff1a;Java应用的性能守护神&#xff0c;让监控变得既轻松又有趣&#xff01; 在这个快节奏的数字化时代&#xff0c;作为一名开发者&#xff0c;你是否曾因应用性能问题而夜不能寐&#xff1f;是不是常幻想有个超级英雄能在关键时刻挺身而出&#xff0c;帮你揪…
阅读更多...
淘宝优惠券领取软件草柴返利APP想从淘宝粘贴提示怎么关闭？想从天猫粘贴、想从京东粘贴弹窗提示关闭

淘宝优惠券领取软件草柴返利APP想从淘宝粘贴提示怎么关闭？想从天猫粘贴、想从京东粘贴弹窗提示关闭

使用iPhone苹果手机想从淘宝点击分享复制链接&#xff0c;到草柴APP查询该商品内部大额隐藏优惠券和返利。可是&#xff0c;苹果iPhone手机每次将复制的商品链接&#xff0c;粘贴到草柴APP时都是提示&#xff1a;“草柴”想从“淘宝”粘贴&#xff0c;每次都需要点击允许粘贴后…
阅读更多...
docker搭建代码审计平台sonarqube

docker搭建代码审计平台sonarqube

docker搭建代码审计平台sonarqube 一、代码审计关注的质量指标二、静态分析技术分类三、sonarqube流程四、快速搭建sonarqube五、sonarqube scanner的安装和使用 一、代码审计关注的质量指标 代码坏味道 代码规范技术债评估 bug和漏洞代码重复度单测与集成 测试用例数量覆盖率…
阅读更多...
管易云与金蝶K3-WISE对接集成发货单查询2.0打通新增销售出库（红蓝字）

管易云与金蝶K3-WISE对接集成发货单查询2.0打通新增销售出库（红蓝字）

管易云与金蝶K3-WISE对接集成发货单查询2.0打通新增销售出库&#xff08;红蓝字&#xff09; 源系统:管易云 金蝶管易云是金蝶集团旗下以电商和新零售为核心业务的子公司&#xff0c;公司于2008年成立&#xff0c;拥有从事电商及新零售业务相关专业知识工作者超过1000人。为伊利…
阅读更多...
35道必懂的 Linux 运维面试题

35道必懂的 Linux 运维面试题

1、现在给你三百台服务器&#xff0c;你怎么对他们进行管理&#xff1f; 管理3百台服务器的方式&#xff1a; 1&#xff09;设定跳板机&#xff0c;使用统一账号登录&#xff0c;便于安全与登录的考量。 2&#xff09;使用 salt、ansiable、puppet 进行系统的统一调度与配置的…
阅读更多...
鸿蒙 DevEcoStudio:简单实现网络请求登录案例

鸿蒙 DevEcoStudio:简单实现网络请求登录案例

使用http或axios实现登录案例 在entry/src/main/ets/pages路径下新建Page9.ets文件&#xff1a; import http from ohos.net.http import router from ohos.router Entry Component struct Page9 {State message: string Hello WorldState username: string State password:…
阅读更多...
【网络原理】HTTP协议 | 报文格式 | Fiddler抓包 | HTTP请求 | HTTP响应 | 构造HTTP请求

【网络原理】HTTP协议 | 报文格式 | Fiddler抓包 | HTTP请求 | HTTP响应 | 构造HTTP请求

文章目录 HTTP协议使用HTTP的场景&#xff1a; 一、HTTP协议的报文格式1.Fiddler的使用教程 二、HTTP请求(Request)1.首行&#xff1a;1)方法(method)GET和POST的区别(面试题) 2)URL 2.请求头&#xff08;header&#xff09;&#xff1a;1.HOST:2.Content-Length3.body中数据的…
阅读更多...
个人IP打造孵化运营产业链商业计划书

个人IP打造孵化运营产业链商业计划书

【干货资料持续更新&#xff0c;以防走丢】 个人IP打造孵化运营产业链商业计划书 部分资料预览 资料部分是网络整理&#xff0c;仅供学习参考。 PPT共90页&#xff08;完整资料包含以下内容&#xff09; 目录 个人IP运营方案&#xff1a; 1. 个人IP定位与构建 1.1 人格画像构…
阅读更多...
2024五一档中国电影市场研究报告

2024五一档中国电影市场研究报告

来源&#xff1a;拓普数据 2024年五一档内地电影总票房15.27亿&#xff0c;同比增长0.38%&#xff0c;低于2021年的16.74亿&#xff0c;与2019年档期票房相当。日均大盘票房3.05亿&#xff0c;同比小幅增长0.4%&#xff0c;低于2018-2021年同期&#xff0c;位居档期影史第四。…
阅读更多...
列表处理基础问题的四种方法：从入门到惊艳

列表处理基础问题的四种方法：从入门到惊艳

目录 一、引言 二、方法一&#xff1a;基础循环遍历 三、方法二&#xff1a;列表推导式 四、方法三&#xff1a;内置函数与高阶函数 五、方法四&#xff1a;惊艳的库与工具 六、案例研究 七、总结 一、引言 在编程的世界中&#xff0c;列表&#xff08;List&#xff09…
阅读更多...
Element-ui-vue3-前端界面开发-配置-编辑main.js-nodejs基础语法-vue3-html模板语法-vue文件编译

Element-ui-vue3-前端界面开发-配置-编辑main.js-nodejs基础语法-vue3-html模板语法-vue文件编译

前端配置 1.下载nodejs 18 lts2.配置nodejs和安装vue3.vue调试技巧3.1.debugger3.2.vue devtools4.编辑main.js5.nodejs基础语法5.1.import5.1.1.导入单个模块或组件5.1.2.导入整个模块或库5.1.3.导入默认导出5.1.4.导入 css文件5.1.5.导入模块和组件5.2.export5.2.1.命名导出5…
阅读更多...
第十五届蓝桥杯省赛大学B组(c++)

第十五届蓝桥杯省赛大学B组(c++)

很幸运拿了辽宁赛区的省一,进入6月1号的国赛啦... 这篇文章主要对第十五届省赛大学B组(C)进行一次完整的复盘,这次省赛2道填空题6道编程题: A.握手问题 把握手情景看成矩阵: 粉色部分是7个不能互相捂手的情况 由于每个人只能和其他人捂手, 所以黑色情况是不算的 1和2握手2和…
阅读更多...
SpringBoot 自定义 HandlerMethodArgumentResolver 搞定xml泛型参数解析

SpringBoot 自定义 HandlerMethodArgumentResolver 搞定xml泛型参数解析

文章目录 介绍一、解析简单 xml 数据案例引入 Jackson 的 xml 支持定义 Message 对象&MessageHeader 对象定义 Controller 方法调用结果 二、解析带泛型的 XML 数据案例2.1 直接给 Message 加上泛型 T2.2 无法直接解析泛型参数了 三、自定义 MVC 的参数解析器实现泛型参数解…
阅读更多...
智能BI平台（后端）-- 项目介绍

智能BI平台（后端）-- 项目介绍

文章目录 项目介绍需求分析基础架构图优化架构图技术栈 开个新坑&#xff0c;预计时间不会很长 项目介绍 BI商业智能&#xff1a;数据可视化&#xff0c;报表可视化系统 主流BI&#xff1a;帆软BI&#xff0c;小马BI&#xff0c;微软 Power BI 传统BI&#xff1a;[查看传统 BI…
阅读更多...
精益生产咨询公司在企业转型中发挥的作用有哪些？

精益生产咨询公司在企业转型中发挥的作用有哪些？

在全球化竞争日益激烈的今天&#xff0c;企业转型已成为许多组织求生存、谋发展的必经之路。而在这条道路上&#xff0c;精益生产咨询公司的作用愈发凸显&#xff0c;它们如同企业转型的得力助手&#xff0c;帮助企业在复杂的商业环境中找到新的增长点&#xff0c;实现更高效、…
阅读更多...
最新文章

Copyright @ 2022~2023