自己封装的一个原生JS拖动方法。
代码:
1 function drag(t,p){ 2 3 var point = p || null, 4 target = t || null, 5 resultX = 0, 6 resultY = 0; 7 8 (!point)? point = target : ''; //如果没有拖动点,则拖动点默认为整个别拖动元素 9 10 function getPos(t){ 11 var offsetLeft = 0, 12 offsetTop = 0, 13 offsetParent = t; 14 15 while(offsetParent){ 16 offsetLeft+=offsetParent.offsetLeft; 17 offsetTop+=offsetParent.offsetTop; 18 offsetParent = offsetParent.offsetParent; 19 } 20 21 return {'top':offsetTop,'left':offsetLeft}; 22 } 23 24 function core(){ 25 26 var width = document.body.clientWidth || document.documentElement.clientWidth, 27 height = document.body.clientHeight || document.documentElement.clientHeight; 28 maxWidth = width - target.offsetWidth, 29 maxHeight = height - target.offsetHeight; 30 31 (resultX >= maxWidth)? target.style.left = maxWidth+'px' : (resultX > 0)?target.style.left = resultX +'px': ''; //重置默认位置。 32 (resultY >= maxHeight)? target.style.top = maxHeight +'px' : (resultY > 0)?target.style.top = resultY +'px':''; //重置默认位置。 33 34 point.οnmοusedοwn=function(e){ 35 var e = e || window.event, 36 coordX = e.clientX, 37 coordY = e.clientY, 38 posX = getPos(target).left, 39 posY = getPos(target).top; 40 41 point.setCapture && point.setCapture(); //将Mouse事件锁定到指定元素上。 42 document.οnmοusemοve=function(e){ 43 44 var ev = e || window.event, 45 moveX = ev.clientX, 46 moveY = ev.clientY; 47 48 resultX = moveX - (coordX - posX); //结果值是坐标点减去被拖动元素距离浏览器左侧的边距 49 resultY = moveY - (coordY - posY); 50 51 (resultX > 0 )?((resultX < maxWidth)?target.style.left = resultX+'px' : target.style.left = maxWidth+'px') : target.style.left = '0px'; 52 (resultY > 0 )?((resultY < maxHeight)?target.style.top = resultY+'px' : target.style.top = maxHeight+'px') : target.style.top = '0px'; 53 54 ev.stopPropagation && ev.stopPropagation(); 55 ev.preventDefault; 56 ev.returnValue = false; 57 ev.cancelBubble = true; 58 }; 59 }; 60 document.οnmοuseup=function(){ // 解决拖动时,当鼠标指向的DOM对象非拖动点元素时,无法触发拖动点的onmousedown的BUG。 61 document.onmousemove = null; 62 point.releaseCapture && point.releaseCapture(); // 将Mouse事件从指定元素上移除。 63 }; 64 point.οnmοuseup=function(e){ 65 var e = e || window.event; 66 document.onmousemove = null; 67 point.releaseCapture && point.releaseCapture(); 68 }; 69 } 70 core(); 71 window.onresize = core; 72 }
使用方式:
1 drag(t,p) 2 /* 3 * 说明 4 * t 表示被拖动的元素 5 * p 表示拖动点 6 */ 7 8 // 注意:如果省略拖动点,默认可拖动的区域是整个被拖动元素
转载于:https://www.cnblogs.com/HCJJ/p/5834559.html
自己封装的一个原生JS拖动方法。相关推荐
- js原生ajax跨域请求,封装一个原生js的ajax请求,支持IE9CORS跨域请求
前言 关于纯js的ajax请求,我之前有文章写过, https://www.haorooms.com/post/js_ajax_chun , 关于CORS跨域资源共享,我也有文章写过, https:/ ...
- 原生ajax如何跨域,封装一个原生js的ajax请求,支持IE9CORS跨域请求
前言 关于纯js的ajax请求,我之前有文章写过,https://www.haorooms.com/post/js_ajax_chun, 关于CORS跨域资源共享,我也有文章写过,https://ww ...
- ie下的placeholder原生js实现方法
2019独角兽企业重金招聘Python工程师标准>>> css代码 *{margin: 0;padding: 0;}body{*text-align: center;}/*登陆表单* ...
- 创建原生JS insertafter()方法实现
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...
- 如何控制滚轮横向滑动(原生JS实现方法)
控制滚轮横向滑动 提示:这个是以前讨论的时候遇到的情况 ; 回头想了一下应用场景确实挺多的,.所以今天趁周末大致的记录一下如何通过js去实现[横向滚动] 文章目录 控制滚轮横向滑动 解决思路如下 `1 ...
- 原生js实现ajax方法(闭包)
学习Jquery是,模仿写了一个原生js实现ajax方法(闭包),代码上加有注释 方法如下: <script type="text/javascript">(funct ...
- 原生js实现jquery库中选择器的功能(jquery库封装一)
今天是2017.1.1,新的一天,新的一年,新的一年里继续夯实基础知识,在工作中多些项目,多思考,多总结,前端是不断更新,在更新的过程中也是发现乐趣和挑战自我的过程,希望年轻的我和年轻的javascr ...
- 用原生 js jquery 实现知乎收起答案功能
Update 2016.12.7 已封装为插件 原生 js 插件$ npm install foldcontent-zhihu@">=3.0.12" --save Usage ...
- html flappybird小游戏代码,原生js实现Flappy Bird小游戏
这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习. html结构 css样式 #game { width: 800px; height: 600px; border: 1px s ...
最新文章
- iphone-common-codes-ccteam源代码 CCUIAlertView.m
- STM32为何在诸多的单片机中脱颖而出?
- MasterPage + UpdatePanel + FileUpload
- 在WinCE5.0和WinCE6.0下,编译选项介绍
- class传参 python_Python类的概念、定义、属性、继承
- 贪吃蛇的c语言代码怎么弄,刚学C语言,想写一个贪吃蛇的代码
- vim复制,粘贴,删除,撤销,替换,光标移动等用法
- 北京交通大学离散数学 谓词逻辑_【精选】离散数学习题解答-第3章谓词逻辑.pdf...
- 4.23上海交大PMP试题每日一题
- Linux驱动——mmc bus浅析(五)
- rar压缩包已加密如何解除,rar压缩包权限限制怎么办?
- 有个大神级女朋友是什么体验
- Magento前台不显示添加的产品
- 浅谈域名分级及域名解析过程
- 【小家Spring】Spring AOP各个组件概述与总结【Pointcut、Advice、Advisor、Advised、TargetSource、AdvisorChainFactory...】
- 进行范围查找的折半查找法
- java enum枚举型使用
- c语言水仙花数256,c语言学习:求水仙花数
- 我的游戏学习日志2——雪人兄弟
- 索骥馆-美工设计之《配色设计原理》扫描版[PDF]
热门文章
- 记GMIC 2014
- android面试题精选
- 简评知乎的优点与不足
- XAMPP 无法启动解决
- SQL版DNN的安装心得
- [xsy3132]数表
- JSP中的:request.getScheme()+://+request.getServerName()+:+request.getServer
- github 开源 代码 学习 集合(转载)
- 2016年学习Linux决心书(老男孩教育在线课程班第二期)
- Fragment的保存