系列文章目录

提示：各位友友大家好呀，今天我们使用js实现一个跟随鼠标移动的小的案例吧

文章目录

系列文章目录
前言
一、元素偏移量是什么？
二、使用步骤
- 1.想方设法：先获取到坐标
- 2.读入数据
总结

前言

提示：
今天学习了一个js的小案例，来和可乐一起学习探讨下吧 skr~
效果：

提示：以下是本篇文章正文内容，下面案例可供参考

一、元素偏移量是什么？

offset ：中文就是偏离的意思，使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

案例中使用到的属性：offsetLeft offseLtTop

offsetleft ：返回元素距离父元素左侧的距离

offsetTop：返回元素距离父元素上方的距离

二、使用步骤

1.想方设法：先获取到坐标

鼠标点击获取盒子中的位置，出现坐标？

代码如下（示例）：

 <script><div class="box"></div>document.querySelector('.box').addEventListener('click',function(event){var x = event.pageXvar y = event.pageYvar left = this.offsetLeftvar top = this.offsetTopconsole.log(x-left,y-top)})</script>

注：

1、获取盒子给盒子创建点击的事件监听事件
2、通过event 获取页面上的坐标（pageX,pageY）
3、怎么获得？使用pageX-盒子的offsetLeft获得x轴
使用pageY-盒子的offsetTop获得y轴

2.读入数据

在获得坐标的基础上实现盒子移动

代码如下（示例）：

总结

世界因代码而改变

【JavaScript]实现动态拖拽小精灵相关推荐

JavaScript中的拖拽事件且限制出界
JavaScript中的拖拽事件限制出界 JavaScript事件中很多都会用到拖拽,而在现实中很多拖拽是会限制在浏览器界面禁止出界的,下面是封装好的限制出界的拖拽事件. function drag( ...
Qt之QToolButton 实现动态拖拽Drag、Drop功能
简述最近在做一个项目需要实现工具的动态添加功能,想来想去也只有动态拖拽最为直观,于是摸索了几天才摸索明白,最后选择了QToolButton作为载体重写了一下.当然也可以选择QPushButton作为 ...
highchart的draggable-points.js依赖实现图表的动态拖拽操作
highchart的draggable-points.js依赖实现图表的动态拖拽操作需求实现总结需求实现一个曲线图,能够通过鼠标去拖拽点,来进行修改图表实现例子基于vue来实现,如果是j ...
JavaScript实现鼠标拖拽效果
JavaScript实现鼠标拖拽效果前几篇博客一直在讲鼠标的移动事件相关的效果,今天再来讲一讲如何利用鼠标事件实现拖拽div块移动的效果.效果如图: HTML代码: <div id=" ...
html组态图动态拖拽,基于HTML5的Drag and Drop生成图片Base64信息
HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag ...
全网为数不多清晰可行的在VUE中使用sortable.js实现动态拖拽排序的教程！
目录 0 写在前面的 1 依赖安装 2 手写简单标签演示 3 要点 4 效果 0 写在前面的首先批评以下文章 (10条消息) sortable.js 实现拖拽_sortablejs_花铛的博客-CS ...
JavaScript实现鼠标拖拽登录框
拖拽的本质是登录框获得光标的偏移来调整自身的偏移. 拖拽发生时,光标相对盒子的坐标不会变化,相对于页面的坐标却在变化,二者的差值就是盒子需要的. 两个注意点: 1. 赋值给盒子的什么属性 outer. ...
javascript --- 原生的拖拽功能实现
准备一个方块: <style>.drag{background-color:#aaf;position:absolute;} </style> <div class=&q ...
javascript --- Sortable一个拖拽的接口
最近项目里面要实现需要实现一个拖拽功能,自己实现很麻烦,就在网上找到了一个封装好的sortable函数,github(https://github.com/SortableJS/Sortable). ...

【JavaScript]实现动态拖拽小精灵