原生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 相关文章推荐
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 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验证码代码
2012/02/27 PHP
PHP多态代码实例
2015/06/26 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
JS定义回车事件(实现代码)
2013/07/08 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
js脚本编写简单刷票投票系统
2017/06/27 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
python生成ppt的方法
2018/06/07 Python
python中使用print输出中文的方法
2018/07/16 Python
谈谈Python中的while循环语句
2019/03/10 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
入党个人总结范文
2015/03/02 职场文书
运动会通讯稿600字
2015/07/20 职场文书
学术会议开幕词
2016/03/03 职场文书
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技