运用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更换文章内容与改变字体大小代码
Sep 30 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
TypeScript中的方法重载详解
Apr 12 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
了解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
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
关于vue-router的那些事儿
2018/05/23 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
Python3中的2to3转换工具使用示例
2015/06/12 Python
python实现简单爬虫功能的示例
2016/10/24 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
python批量处理文件或文件夹
2020/07/28 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
法雷奥SQA(electric)面试问题
2016/01/23 面试题
生态学毕业生自荐信
2013/10/27 职场文书
解除财产保全担保书
2014/05/20 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
光荣之路观后感
2015/06/12 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
导游词之珠海轮廓
2019/10/25 职场文书