代码:

 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拖动方法的更多相关文章

  1. 探讨把一个元素从它所在的div 拖动到另一个div内的实现方法

    故事背景: 接到一个新需求,要求用vue搞,主要是拖动实现布局,关键点有:单个组件拖动,一行多列里面的组件拖动,  单个组件可以拖入一行多列里, 单个组件的拖动好实现,关键是把一个组件拖动到另一个类似 ...

  2. 原生JS中apply()方法的一个值得注意的用法

    今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...

  3. javascript获取数组最后一个元素(三种方法)

    JavaScript 获取Array末尾元素 一.JavaScript pop() 方法 pop() 方法用于删除并返回数组的最后一个元素. 注意:pop() 方法将删除 arrayObject 的最 ...

  4. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  5. 在Swift中使用JavaScript的方法和技巧

    本文作者Nate Cook是一位独立的Web及移动应用开发者,是继Mattt大神之后NSHipster的主要维护者,也是非常知名活跃的Swift博主,并且还是支持自动生成Swift在线文档的Swift ...

  6. 抛弃jQuery 深入原生的JavaScript

    虽然我已经做网站建设工作10多年了,但我从最近3年才开始更多地学习如何更好的将纯JavaScript用于工作中,而不总是将jQuery考虑在第一位.现在我每天学习很多东西.这个过程让我觉得Adtile ...

  7. Ext JS学习第九天 Ext基础之 扩展原生的javascript对象

    此文来记录学习笔记: •Ext对于原生的javascript对象进行了一系列的扩展,我们把他们掌握好,更能深刻的体会Ext的架构,从而对我们的web开发更好的服务, 源码位置,我们可以从开发包的这个位 ...

  8. Ext JS学习第十天 Ext基础之 扩展原生的javascript对象(二)

    此文来记录学习笔记: 今天继续说Ext.Array,Ext.Function,Ext.Date,Ext.Error ------------------------------------------ ...

  9. 异步处理XML异步数据——以原生的JavaScript与jQuery中的$.ajax()为例

    此文档解决以下问题: 一.原生的JavaScript从服务器端输出XML格式数据 1.XMLHttpRequest对象的运用 XMLHttpRequest对象的open()方法 XMLHttpRequ ...

随机推荐

  1. tyvj1017 - 冗余关系 ——并查集

    题目链接:https://www.tyvj.cn/Problem_Show.aspx?id=1017 并查集 #include <cstdio> #include <cstdlib& ...

  2. zoj3261 带权并查集

    题意:有很多颗星球,各自有武力值,星球间有一些联系通道,现在发生战争,有一些联系通道会被摧毁,而一些星球会通过还没有被摧毁的联系通道直接或者间接联系能够联系到的武力值最高的星球求救,如果有多个武力值都 ...

  3. 微信JS-SDK应用DEMO

    首先需要将以下函数写入TinkPHP的公用function.php文件中以便调用 // 基于ThinkPHP /** * php curl 请求链接 * 当$post_data为空时使用GET方式发送 ...

  4. checkbox 点击全选

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. [BeiJing2010组队][BZOJ 1977]次小生成树 Tree

    话说这个[BeiJing2010组队]是个什喵玩意? 这是一道严格次小生成树,而次小生成树的做法是层出不穷的 MATO IS NO.1 的博客里对两种算法都有很好的解释,值得拥有:  (果然除我以外, ...

  6. 磁盘参数修订[转自vbird]

    某些时刻,你可能会希望修改一下目前文件系统的一些相关信息,举例来说,你可能要修改 Label name , 或者是 journal 的参数,或者是其他硬盘运行时的相关参数 (例如 DMA 启动与否-) ...

  7. 【转】iOS 删除已经配置的类库和移除CocoaPods

    原文网址:http://www.jianshu.com/p/552f21a989ba 引言 我们使用CocoaPods非常高效地将一些第三方类库导入到我们的项目中,但是不由得产生一个疑问:如果发现某个 ...

  8. 代码备份:处理 SUN397 的代码,将其分为 80% 训练数据 以及 20% 的测试数据

    处理SUN397 的代码,将其分为80% 训练数据以及20% 的测试数据 2016-07-27 1 %% Code for Process SUN397 Scene Classification 2 ...

  9. Linux 查看CPU信息、机器型号等硬件信息

    测试机器的硬件信息: 查看CPU信息(型号) # cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c       8  Intel(R) Xeo ...

  10. Unity摄像机

    把相机做为人物的子对象,就可以制作: 1.第1人称摄像机:把摄像机摆在眼睛前面 2.第3人称摄像机:把摄像机摆在人后上面 Clear Flags: http://www.haogongju.net/a ...