原生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实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
微信小程序 教程之事件
Oct 18 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
很棒的vue弹窗组件
May 24 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
PHP mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
jQuery 解析xml文件
2009/08/09 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
JQuery判断正整数整理小结
2017/08/21 jQuery
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
python mysql中in参数化说明
2020/06/05 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
ASP.NET Core中的配置详解
2021/02/05 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
美国最大点评网站:Yelp
2018/02/14 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
外企C语言笔试题
2013/11/10 面试题
审计工作个人的自我评价
2013/12/25 职场文书
《小石潭记》教学反思
2014/02/13 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
尊老爱亲美德少年事迹材料
2014/08/14 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书