原生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 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
Exitjs获取DataView中图片文件名
Nov 26 Javascript
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
js读取cookie方法总结
Oct 31 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 Javascript
JS快速实现简单计算器
Apr 08 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
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
zf框架的校验器InArray使用示例
2014/03/13 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
一个JavaScript继承的实现
2006/10/24 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
js jquery数组介绍
2012/07/15 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
使用python实现扫描端口示例
2014/03/29 Python
Python的垃圾回收机制深入分析
2014/07/16 Python
Python中的进程分支fork和exec详解
2015/04/11 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
python与字符编码问题
2019/05/24 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
4S店售后客服自我评价
2014/04/09 职场文书
学雷锋的心得体会
2014/09/04 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
先进个人总结范文
2015/02/15 职场文书
个人总结格式范文
2015/03/09 职场文书
邹越演讲观后感
2015/06/15 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书