文档章节

js实现拖动效果

o
 osc_1ee7cxmx
发布于 2018/08/06 17:13
字数 126
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

实现这个功能主要是配合鼠标的mouse事件,拖动原理如下图(以横向x坐标为例,y轴原理是一样的):

html代码:

<div id="box"></div>

CSS代码:

#box {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 10px;
      left: 10px;
      background: red;
}

javaScript代码:

let box = document.getElementById('box');
    document.onmousedown = function (e) {
      let disx = e.pageX - box.offsetLeft;
      let disy = e.pageY - box.offsetTop;
      document.onmousemove = function (e) {
        box.style.left = e.pageX - disx + 'px';
        box.style.top = e.pageY - disy + 'px';
      }
    //释放鼠标按钮,将事件清空,否则始终会跟着鼠标移动
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null;
      }
}

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

Pytest03-pytest命令行参数

目录 3.pytest命令行参数 3.1 pytest控制台信息详解 3.2 Pytest运行结果类型 3.3 Pytest命令行参数 3.3.1 --collect-only 3.3.2 -k Expression 3.3.3 -m MarkExpr 3.3.4 -x, --exitfirst 3.3......

osc_4ox4jhek
47分钟前
19
0
protocol buffer 基础

我们知道接口传输数据的格式有XML,它是 web services 使用的传输数据的格式,在web services 中叫 WSDL。 https://www.w3school.com.cn/wsdl/index.asp 不过 web Services 已经是被淘汰的技...

osc_ee3ody6v
48分钟前
0
0
SequoiaDB监控与开发实践分析

使用背景 公司近期上线了一个新应用,底层数据库采用了国产的分布式数据库 – SequoiaDB。 因为需要将 SequoiaDB 集群纳入到公司的整个监控体系中,所以需要对 SequoiaDB 的状态、性能指标等...

osc_mf7xwvy6
49分钟前
15
0
Python探索之旅 | 第一部分第三课:初识Python的解释器

作者 谢恩铭,公众号「程序员联盟」(微信号:coderhub)。 转载请注明出处。 原文:https://www.jianshu.com/p/a34eaffcc420 《Python探索之旅》全系列 内容简介 前言 Python 的解释器 Pyth...

osc_wobxrheh
50分钟前
17
0
Python探索之旅 | 第一部分第四课:变量的奇幻世界

作者 谢恩铭,公众号「程序员联盟」(微信号:coderhub)。 转载请注明出处。 原文:https://www.jianshu.com/p/d88e11bc7fec 《Python探索之旅》全系列 内容简介 前言 什么是变量及变量的作...

osc_wyap8yov
50分钟前
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部