JavaScript 原生js实现鼠标拖拽移动盒子图片

主要用到函数

鼠标按下：onmousedown
鼠标移动：onmousemove
鼠标抬起：onmouseup

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.btn_box {width: 1000px;margin: 30px auto;display: flex;justify-content: space-between;align-items: center;}.container_box {width: 1000px;height: 800px;overflow: hidden;margin: 30px auto;border: 5px solid pink;position: relative;}
</style>
<body><div class="btn_box"><button onclick="zoomOut()">缩小</button><button onclick="reset()">重置</button><button onclick="zoomIn()">放大</button></div><div class="container_box"><div id="barcon" name="barcon" style="position: relative; cursor: grab; background-color: pink;"><img width="100%" src="./v2-3ae61d96831a9c1bbde55abff947d200_1440w.jpg" /></div></div><script>let zoomNumber = 1;const box = document.getElementById("barcon");// 缩小function zoomOut() {if (zoomNumber > 1) {zoomNumber -= 0.5;}box.style.transform = `scale3d(${zoomNumber}, ${zoomNumber}, 1) rotate(0deg)`;}// 放大function zoomIn() {zoomNumber += 0.5;box.style.transform = `scale3d(${zoomNumber}, ${zoomNumber}, 1) rotate(0deg)`;}// 重置function reset() {box.style.left = "0px";box.style.top = "0px";zoomNumber = 1;box.style.transform = `scale3d(${zoomNumber}, ${zoomNumber}, 1) rotate(0deg)`;}const drag = (obj) => {// 鼠标被按下obj.onmousedown = (event) => {event = event || window.event;// 阻止默认事件event.preventDefault();// 鼠标手obj.style.cursor = "grabbing";// 最大移动距离var maxMoveX = obj.clientWidth - 50;var maxMoveY = obj.clientHeight - 50;// 计算鼠标当前坐标 = 鼠标按下坐标 - 元素当前坐标(距离父元素距离)// div的水平偏移量  鼠标.clentX - 元素.offsetLeft// div的垂直偏移量  鼠标.clentY - 元素.offsetTopvar ol = event.clientX - obj.offsetLeft;var ot = event.clientY - obj.offsetTop;// 绑定鼠标移动事件document.onmousemove = (event2) => {event2 = event2 || window.event;// 计算移动距离 = 当前鼠标坐标 - 鼠标按下坐标var left = event2.clientX - ol;var top = event2.clientY - ot;// 判断左右移动距离if (left >= maxMoveX) {left = maxMoveX;} else if (left <= (-maxMoveX)) {left = -maxMoveX;}// 判断上下移动距离if (top >= maxMoveY) {top = maxMoveY;} else if (top <= (-maxMoveY)) {top = -maxMoveY;}obj.style.left = left + "px";obj.style.top = top + "px";}// 绑定鼠标松开事件document.onmouseup = () => {// 取消鼠标移动事件document.onmousemove = null;document.onmouseup = null;// 还原鼠标手obj.style.cursor = "grab";}}}drag(box);</script>
</body></html>

JavaScript 原生js实现鼠标拖拽移动盒子图片相关推荐

html点击控制盒子左右移动,JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例...
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例发布时间:2020-10-04 12:47:25 来源:脚本之家阅读:121 作者:s_psycho 本文实例讲述了JS实现鼠标拖拽盒子移动及右键 ...
html 复选框拖拽多选,js实现鼠标拖拽多选功能
最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo: 遮罩出现: 被遮罩盖住的,即为选中的块(背景色为粉色) 下面是具体代码,注释已在文中,与大家交流. 鼠标拖拽多选功能 ...
原生js实现元素拖拽onmousedown/onmousemove/onmouseup
文章目录前言一.实现思路二.具体步骤 1.鼠标在元素上按下时 2.鼠标拖拽元素时 3.鼠标抬起事件 4.完整代码总结前言我们在网页操作的时候,经常用到鼠标拖拽元素的行为.本篇文章就来讨论一 ...
html div 可鼠标滚动,js实现鼠标拖拽div左右滑动
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下 Title body{ position: relative; margin:0; padding:0; width ...
用鼠标左右拖拽 html,js实现鼠标拖拽div左右滑动
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下 Title body{ position: relative; margin:0; padding:0; width ...
JS中鼠标拖拽div（2）（setCapture()方法和releaseCapture()方法）
接着鼠标拖拽div(1)解决问题,当在拖拽事件所在的页面按下键盘的ctrl+A全选后,再去拖拽div,浏览器会默认去搜索网页中的内容,拖拽功能就会失效,(搜索网页内容是浏览器的默认行为,所以要想不发生 ...
JS中鼠标拖拽div(onmousedown、onmousemove、onmouseup)
onmousedown:鼠标的按下事件 onmouseove:鼠标的移动事件 onmouseup:鼠标的松开事件思路: 想实现鼠标拖拽div移动的效果,就得先获取到div,然后给div绑定鼠标按下的 ...
js控制鼠标移动_原生JS封装可拖拽效果
项目代码已上传码云:小朋友/JavaScript 封装可拖拽特效访问该URL可查看效果:http://is666a.gitee.io/javascript_drag/ https://www.zhi ...
js实现鼠标拖拽功能基本思路
如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒. onmousedown:鼠标按下事件 onmousemove:鼠标移动事件 onmouseup:鼠标抬起事件拖拽的基本原 ...
用js编写,鼠标拖拽特效。
盒子的位置(left和top值)= 鼠标的位置(left和top值)- 鼠标按下时与盒子之间的距离(left和top值). 编写HTML,设计弹框用于实现拖拽特效. 为拖拽条添加mousedown事件 ...

JavaScript 原生js实现鼠标拖拽移动盒子图片

主要用到函数

代码

JavaScript 原生js实现鼠标拖拽移动盒子图片相关推荐

最新文章

热门文章