js原生代码实现鼠标拖拽(超简单)

时间: 2018-12-26阅读: 822标签: 代码

首先先来看这一张图


在这种图中,盒子的大小为512px,并且margin-left:-250px margin-top:140px;并通过一些样式让其在中部显示。

这些样式都不是重要的,这里加个margin是为了让其出现拖拽的时候出现鼠标偏移,好做演示而已,不然margin:0 auto 就可以实现盒子的居中。

首先通过offsetLeft的方法获取到盒子的偏移值,然后在通过clientX,clientY获取到鼠标的坐标,通过当前坐标减去offsetLeft的坐标就可以获取鼠标在div里面的。

具体数值,也就是鼠标应该在的地方,这个时候拖拽的时候回出现鼠标偏移的现象,没错,这是margin值搞的鬼,margin也是盒子的一部分,所有要获取到鼠标在盒子里面的位置的话,加上的margin要减掉

减掉的margin要加上,这个是我根据思路得到的代码,可以参考一下,大神请忽悠


 来自:https://www.cnblogs.com/wikina/p/10177117.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1704

关闭

JS无形装逼,最为致命

单行简洁的代码很难维护(有时甚至难以理解),但这并不能阻止广大攻城狮们脑洞,在编写简洁的代码后获得一定的满足感。以下我最近的一些收藏javascript精简代码集合。

你写的代码就是你的犯罪证据

最近我工作的主要内容,是在和别人结对编程,以对一个大型的遗留系统项目进行重构。过程中,我发现一个特别有意思的东西,我重构了很多的 if 语句。

如何写出优美的javascript代码?

在多年以前,人们注重功能是如何实现的。现如今,随着Web及互联网技术的不断发展,功能仅成了最基本的要求,如何写出漂亮,整洁的代码已成为一个大牛级程序员不可或缺的条件。

HTML、CSS、meta常用代码

关闭首个字母大写(HTML),伪类:active失效,设置页面的编码(HTML),禁止手机放大或缩小(HTML),删除默认的苹果工具栏和菜单栏,默认全屏(HTML),启动或禁用自动识别页面中的电话号码,邮箱、地址

TypeScript 来做依赖注入的限制

依赖注入 是编写可测试/复用代码的关键。 在 TypeScript 中所有对象、属性和方法都有类型,可以大幅简化人工标注的代码,这让很多人重新考虑在 JavaScript 中实现依赖注入。 比如 Angular2 以后的 DI 实现

Js代码中的span拼接

今天遇到一个小需求,用bootstrap的table只有两个字段,占用太宽,页面不美观,组长要求用拼接,一行几列的形式展现出来。我在form表单中拼接了span,遇到以下问题:

程序员面试中徒手写代码的意义?

其实我在本科的时候,就有一次有机会面试谷歌的实习生。但是因为在徒手写代码的时候,失败了,成了我毕生的遗憾。也造成了我在这类面试中的恐惧心理。当时,我只是一名大三学生,我 C 语言课程成绩优秀,算法课成绩一般

常用的JS代码片段

软件正在吞噬世界,JavaScript正在吞噬软件。JavaScript每年都在变得越来越占主导地位,而且没人知道最终会取代它的是什么。如果您没有充分的理由学习一种新语言(例如您的工作要求您维护非JavaScript代码库),那么我的建议是着重于提高JavaScript的水平。

前端代码美化的艺术

原本只是想简单的聊一下代码格式化的问题,无奈本文拖沓了很久,在此期间,我又思考了很多,我越来越觉得代码格式化是一门艺术。为了衬托“艺术”二字,可能叫“代码美化”更贴切一点,但是本文的深度远没有标题那么宏大

原生 js 中应该禁止出现的写法,以提高代码效率和安全性

严格模式下,在 ES6 之前应禁止使用。ES6 开始可以使用,函数的作用域为声明该函数的块内部。非严格模式下应禁止使用。禁止使用 eval。eval 比一般 javascript 执行要慢,因为浏览器对 javascript 进行了优化。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!