原生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 相关文章推荐
JQuery实现自定义对话框的代码
Jun 15 Javascript
jQuery 注意事项 与原因分析
Apr 24 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
webpack中如何加载静态文件的方法步骤
May 18 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
vue 实现用户登录方式的切换功能
Apr 14 Javascript
VueX模块的具体使用(小白教程)
Jun 05 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
咖啡的种类和口感
2021/03/03 新手入门
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
NodeJS的Promise的用法解析
2016/05/05 NodeJs
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
Python callable()函数用法实例分析
2018/03/17 Python
python生成n个元素的全组合方法
2018/11/13 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
python开发一款翻译工具
2020/10/10 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
主题婚礼策划方案
2014/02/10 职场文书
体育馆的标语
2014/06/24 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
党员检讨书
2014/10/13 职场文书
运动与健康自我评价
2015/03/09 职场文书
目标责任书格式范文
2015/05/11 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python