原生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 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
浅析Bootstrap验证控件的使用
Jun 23 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
原生JS运动实现轮播图
Jan 02 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中用hash实现的数组
2011/07/17 PHP
php利用反射实现插件机制的方法
2015/03/14 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
两个Javascript小tip资料
2010/11/23 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
2017/07/18 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
让python json encode datetime类型
2010/12/28 Python
python中for语句简单遍历数据的方法
2015/05/07 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
简单介绍python封装的基本知识
2019/08/10 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
《卖木雕的少年》教学反思
2014/04/11 职场文书
尊师重教主题班会
2015/08/14 职场文书
合作协议书格式范本
2016/03/21 职场文书