原生JS实现拖拽功能


Posted in Javascript onDecember 16, 2020

本文实例为大家分享了JS实现拖拽功能的具体代码,供大家参考,具体内容如下

拖拽的原理:三个事件 onmousedownonmousemoveonmousemove

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
Jul 31 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 #Vue.js
vue实现图片裁剪后上传
Dec 16 #Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 #Vue.js
JS创建自定义对象的六种方法总结
Dec 15 #Javascript
npm全局环境变量配置详解
Dec 15 #Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 #Vue.js
angular *Ngif else用法详解
Dec 15 #Javascript
You might like
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
PHP多进程编程实例详解
2017/07/19 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
python中嵌套函数的实操步骤
2019/02/27 Python
python实现五子棋小程序
2019/06/18 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
大学生个人实习的自我评价
2014/02/15 职场文书
安全保证书范文
2014/04/29 职场文书
员工合理化建议书
2014/05/19 职场文书
领导干部作风建设总结
2014/10/23 职场文书