运用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 相关文章推荐
JavaScript模板入门介绍
Sep 26 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
Aug 18 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
jQuery实现的form转json经典示例
Oct 10 jQuery
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 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
业余方法DIY电子管FM收音机
2021/03/02 无线电
sphinx增量索引的一个问题
2011/06/14 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
javascript中的window.location.search方法简介
2013/09/02 Javascript
js动态切换图片的方法
2015/01/20 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
Vuex的初探与实战小结
2018/11/26 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
python实现异步回调机制代码分享
2014/01/10 Python
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
Python读写Excel表格的方法
2021/03/02 Python
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
小小商店教学反思
2014/04/27 职场文书
护士长竞聘演讲稿
2014/04/30 职场文书
离婚协议书怎么写
2014/09/12 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
开学典礼校长致辞
2015/07/29 职场文书
MySQL 十大常用字符串函数详解
2021/06/30 MySQL
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python