运用js实现图层拖拽的功能


Posted in Javascript onMay 24, 2019

1.需求分析:设计一个元素,可以跟随鼠标的移动,元素也进行移动,并且能够在鼠标按上与按下元素的时候,元素同样可以进行改变样式颜色。

2. 设计思路:先是需要获取元素,给元素绑定鼠标按下的事件,在绑定的事件中,兼容event事件,获取鼠标的坐标和元素的坐标,通过鼠标的坐标减去元素的坐标就可以得到鼠标在元素中的坐标。在绑定事件中,写上一个元素的移动事件,获取元素的移动坐标。最后,在鼠标按上的事件函数中,可以调用元素的移动事件就可以了。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>图层拖拽</title>
 <style>
 .box {
 width: 200px;
 height: 200px;
 background-color: skyblue;
 border: 2px solid #ccc;
 cursor: pointer;
 position: absolute;
 top: 20px;
 left: 100px;
 }
 </style>
</head>
<body>
<div class="box" id="box"></div>
</body>
<script>
 var box = document.getElementById("box");
 box.onmousedown = function(env){
 // 兼容event事件
 var env = env || window.event;
 // 获取鼠标的坐标
 var x = env.clientX;
 var y = env.clientY;
 // 获取元素的坐标
 var left = box.offsetLeft;
 var top = box.offsetTop;
 // 获取鼠标在元素中的坐标
 var x_left = x - left;
 var y_top = y -top;
 // 鼠标点击后改变颜色
 box.style.background = "red";
 // 元素的移动事件函数
 box.onmousemove = function(env){
 // 兼容event事件
 var env = env || window.event;
 // 获取元素移动时的鼠标的坐标
 var x = env.clientX;
 var y = env.clientY;
 // 元素的移动坐标
 box.style.left = (x - x_left)+"px";
 box.style.top = (y - y_top)+"px";
 }
 };
 // 鼠标弹出的事件函数
 box.onmouseup = function(){
 box.style.background = "skyblue";
 // 在鼠标弹出后再次调用元素的鼠标移动事件
 box.onmousemove = function(){};

 };
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
angular+webpack2实战例子
May 23 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 Javascript
JavaScript实现身份证验证代码实例
Aug 26 Javascript
了解javascript中let和var及const关键字的区别
May 24 #Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 #Javascript
小程序登录/注册页面设计的实现代码
May 24 #Javascript
微信小程序+云开发实现欢迎登录注册
May 24 #Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 #Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 #Javascript
JS实现判断数组是否包含某个元素示例
May 24 #Javascript
You might like
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
vue实现计步器功能
2019/11/01 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
python实现Floyd算法
2018/01/03 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
2014年党的群众路线学习心得体会
2014/11/05 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android