原生JS实现拖拽功能
更新时间：2020年12月16日 09:56:37 作者：Dreamer_xr
这篇文章主要为大家介绍了JS实现拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现拖拽功能的具体代码，供大家参考，具体内容如下
拖拽的原理：三个事件 onmousedown、onmousemove、onmousemove
1、鼠标按下，触发onmousedown，获取鼠标坐标x,y，获取元素坐标x,y
通过event.clientX、event.clientY获取鼠标位置的坐标
let x = e.clientX - box.offsetLeft; //鼠标点击坐标距离盒子左边缘的距离 let y = e.clientY - box.offsetTop; //鼠标点击坐标距离盒子上边缘的距离
2、设置元素left、top值，（元素要设置position:absolute）
box.style.left = ev.clientX - x + 'px'; box.style.top = ev.clientY - y + 'px';
3、放开鼠标取消dom事件
下面是详细代码：我只开了横向移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box {
width: 100px;
height: 100px;
background: red;
position: absolute
}
</style>
</head>
<body style="position: relative;overflow: hidden;">
<div id="box">
</div>
<script>
window.onload = function () {
let box = document.getElementById('box')
box.onmousedown = function (ev) {
let e = ev || event;
let x = e.clientX - box.offsetLeft; //鼠标点击坐标距离盒子左边缘的距离
let y = e.clientY - box.offsetTop; //鼠标点击坐标距离盒子上边缘的距离
document.onmousemove = function (ev) {
let e = ev || event;
box.style.left = ev.clientX - x + 'px';
box.style.top = ev.clientY - y + 'px';
let bodyScreenX = ev.screenX
let bodyClientWidth = document.body.clientWidth
document.onmouseup = function (ev) {
if (ev.clientX - x < 0) {
box.style.left = 0
} else if (bodyScreenX > bodyClientWidth) {
box.style.right = 0
box.style.left = bodyClientWidth - 100 + 'px'
}
document.onmousemove = null;
document.onmouseup = null;
}
}
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
代码整体结构是执行速度的决定因素之一，代码量少不一定运行速度快，代码量多也不一定运行速度慢。本篇文章将对js的算法和流程控制进行介绍，下面跟着小编一起来看下吧2016-12-12
这篇文章主要介绍了JavaScript操作Oracle数据库示例,本文使用ActiveXObject实现访问Oracle数据库,需要的朋友可以参考下2015-03-03
这篇文章主要给大家介绍了如何通过一篇文章快速从零快速上手Rollup的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
利用js进行加解密是我们经常会遇到的一个功能，本文给大家介绍的是我目前见到的最全的个人js加解密功能页面，分享出来供大家参考学习，需要的朋友们随着小编来一起学习学习吧2007-12-12
发现我JS真的还有很多要学，下面只是我的练习作品，代码很多是网上的。2008-07-07
这篇文章主要介绍了JavaScript中定义变量时有无var声明的区别分析以及示例分享,需要的朋友可以参考下2014-08-08
这篇文章主要为大家详细介绍了原生JS实现简单的轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了根据配置文件加载js依赖模块,解决方法是笔者自己的思路，抛砖引玉，需要的朋友可以参考下2014-12-12
需要获得图片的长宽，在IE、FireFox下均正常，就TMD在Chrome中不行，有人说是Chrome版本的问题，最终终于找到了解决方法，在这与大家分享下2013-03-03
本文是小编基于js实现的520表白代码，代码简单易懂非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-05-05
最新评论