运用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 相关文章推荐
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
原生js实现抽奖小游戏
Jun 27 Javascript
Ajax是什么?Ajax高级用法之Axios技术
Apr 21 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
apache rewrite_module模块使用教程
2008/01/10 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
php实现文件预览功能
2017/05/23 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
OpenLayers3实现地图显示功能
2020/09/25 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
使用Python编写vim插件的简单示例
2015/04/17 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
《愚公移山》教学反思
2014/02/20 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
Python 数据可视化之Bokeh详解
2021/11/02 Python
Python必备技巧之函数的使用详解
2022/04/04 Python