一个原生的JavaScript拖动方法
代码:
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.onmousedown=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.onmousemove=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.onmouseup=function(){ // 解决拖动时,当鼠标指向的DOM对象非拖动点元素时,无法触发拖动点的onmousedown的BUG。
61 document.onmousemove = null;
62 point.releaseCapture && point.releaseCapture(); // 将Mouse事件从指定元素上移除。
63 };
64 point.onmouseup=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 // 注意:如果省略拖动点,默认可拖动的区域是整个被拖动元素
一个原生的JavaScript拖动方法的更多相关文章
- 探讨把一个元素从它所在的div 拖动到另一个div内的实现方法
故事背景: 接到一个新需求,要求用vue搞,主要是拖动实现布局,关键点有:单个组件拖动,一行多列里面的组件拖动, 单个组件可以拖入一行多列里, 单个组件的拖动好实现,关键是把一个组件拖动到另一个类似 ...
- 原生JS中apply()方法的一个值得注意的用法
今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...
- javascript获取数组最后一个元素(三种方法)
JavaScript 获取Array末尾元素 一.JavaScript pop() 方法 pop() 方法用于删除并返回数组的最后一个元素. 注意:pop() 方法将删除 arrayObject 的最 ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- 在Swift中使用JavaScript的方法和技巧
本文作者Nate Cook是一位独立的Web及移动应用开发者,是继Mattt大神之后NSHipster的主要维护者,也是非常知名活跃的Swift博主,并且还是支持自动生成Swift在线文档的Swift ...
- 抛弃jQuery 深入原生的JavaScript
虽然我已经做网站建设工作10多年了,但我从最近3年才开始更多地学习如何更好的将纯JavaScript用于工作中,而不总是将jQuery考虑在第一位.现在我每天学习很多东西.这个过程让我觉得Adtile ...
- Ext JS学习第九天 Ext基础之 扩展原生的javascript对象
此文来记录学习笔记: •Ext对于原生的javascript对象进行了一系列的扩展,我们把他们掌握好,更能深刻的体会Ext的架构,从而对我们的web开发更好的服务, 源码位置,我们可以从开发包的这个位 ...
- Ext JS学习第十天 Ext基础之 扩展原生的javascript对象(二)
此文来记录学习笔记: 今天继续说Ext.Array,Ext.Function,Ext.Date,Ext.Error ------------------------------------------ ...
- 异步处理XML异步数据——以原生的JavaScript与jQuery中的$.ajax()为例
此文档解决以下问题: 一.原生的JavaScript从服务器端输出XML格式数据 1.XMLHttpRequest对象的运用 XMLHttpRequest对象的open()方法 XMLHttpRequ ...
随机推荐
- DataTransfer(setData()方法)
DataTransfer对象专门用来存储拖放时要携带的数据,它可以被设置为拖放事件对象的DataTransfer属性.---把拖动的数据存入其中setData有两个参数:1.第一个参数为携带数据的数据 ...
- HDU 2096 小明A+B --- 水题
HDU 2096 /* HDU 2096 小明A+B --- 水题 */ #include <cstdio> int main() { #ifdef _LOCAL freopen(&quo ...
- 越狱Season 1-Episode 17: J-Cat
Season 1, Episode 17: J-Cat -Pope: Hey, that's looking good. 嗨,看起来真棒 You're making some real progres ...
- Android系统 小米/三星/索尼 应用启动图标未读消息数(BadgeNumber)动态提醒
http://www.51itong.net/android-badgenumber-9789.html Android系统 小米/三星/索尼 应用启动图标未读消息数(BadgeNumber)动态提醒 ...
- ExtJS-Viewport背景图片铺满浏览器视图并自动伸缩
var viewport = Ext.create('Ext.container.Viewport', { style : 'background-image:url(login_bj.jpg);ba ...
- GNU C 扩展(转)
GNU CC 是一个功能非常强大的跨平台 C 编译器,它对 C 语言提供了很多扩展,这些扩展对优化.目标代码布局.更安全的检查等方面提供了很强的支持.这里对支持支持 GNU 扩展的 C 语言成为 GN ...
- Java——File(文件)
public static void main(String[] args) { // getFile(); /* * 需求: 对指定目录进行所有内容的列出,(包含子目录中的内容) * */ ...
- phpstorm用正则删除PHP代码空行小技巧
有很多小伙伴会遇到代码空行特别多,但是一行一行删除肯定很烦躁,这时候就需要用到批量删除空行. 怎么批量删除空行呢? 我的办法是用正则把所有空行找到,然后一键全部替换. 首先把Match Case和Re ...
- MAVEN build ,GOAL plugin ,execution
http://www.avajava.com/tutorials/lessons/what-are-the-phases-of-the-maven-clean-lifecycle.html https ...
- docker articles&videos
https://github.com/docker/docker https://channel9.msdn.com/Blogs/containers?page=2 https://blog.dock ...