分享一个原生的JavaScript拖动方法


Posted in Javascript onSeptember 25, 2016

代码:

function drag(t,p){

  var point = p || null,
    target = t || null,
    resultX = 0,
    resultY = 0;

  (!point)? point = target : ''; //如果没有拖动点,则拖动点默认为整个别拖动元素

  function getPos(t){
    var offsetLeft = 0,
      offsetTop = 0,
      offsetParent = t;

    while(offsetParent){
      offsetLeft+=offsetParent.offsetLeft;
      offsetTop+=offsetParent.offsetTop;
      offsetParent = offsetParent.offsetParent;
    }

    return {'top':offsetTop,'left':offsetLeft};
  }

  function core(){

    var width = document.body.clientWidth || document.documentElement.clientWidth,
      height = document.body.clientHeight || document.documentElement.clientHeight; 
      maxWidth = width - target.offsetWidth,
      maxHeight = height - target.offsetHeight;

    (resultX >= maxWidth)? target.style.left = maxWidth+'px' : (resultX > 0)?target.style.left = resultX +'px': ''; //重置默认位置。
    (resultY >= maxHeight)?  target.style.top = maxHeight +'px' : (resultY > 0)?target.style.top = resultY +'px':''; //重置默认位置。

    point.onmousedown=function(e){  
      var e = e || window.event,
        coordX = e.clientX,
        coordY = e.clientY,
        posX = getPos(target).left,
        posY = getPos(target).top;

      point.setCapture && point.setCapture();  //将Mouse事件锁定到指定元素上。
      document.onmousemove=function(e){

        var ev = e || window.event,
          moveX = ev.clientX,
          moveY = ev.clientY;

        resultX = moveX - (coordX - posX); //结果值是坐标点减去被拖动元素距离浏览器左侧的边距
        resultY = moveY - (coordY - posY);

        (resultX > 0 )?((resultX < maxWidth)?target.style.left = resultX+'px' : target.style.left = maxWidth+'px') : target.style.left = '0px'; 
        (resultY > 0 )?((resultY < maxHeight)?target.style.top = resultY+'px' : target.style.top = maxHeight+'px') : target.style.top = '0px'; 

        ev.stopPropagation && ev.stopPropagation(); 
        ev.preventDefault;
        ev.returnValue = false;
        ev.cancelBubble = true;
      };
    };
    document.onmouseup=function(){  // 解决拖动时,当鼠标指向的DOM对象非拖动点元素时,无法触发拖动点的onmousedown的BUG。
      document.onmousemove = null;  
      point.releaseCapture && point.releaseCapture();  // 将Mouse事件从指定元素上移除。
    };
    point.onmouseup=function(e){
      var e = e || window.event;
      document.onmousemove = null;
      point.releaseCapture && point.releaseCapture();
    };
  }
  core();
  window.onresize = core;  
}

使用方式:

drag(t,p)
 /* 
 * 说明 
 * t 表示被拖动的元素
 * p 表示拖动点
 */
 
 // 注意:如果省略拖动点,默认可拖动的区域是整个被拖动元素
Javascript 相关文章推荐
Javascript中的数学函数集合
May 08 Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
用C/C++来实现 Node.js 的模块(二)
Sep 24 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
微信小程序实现图片上传
May 23 Javascript
使用JavaScript获取Django模板指定键值数据
May 27 Javascript
使用js和canvas实现时钟效果
Sep 08 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 #Javascript
jQuery的deferred对象使用详解
Sep 25 #Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 #Javascript
D3.js实现直方图的方法详解
Sep 25 #Javascript
关于JS中二维数组的声明方法
Sep 24 #Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 #Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 #Javascript
You might like
php实现读取超大文件的方法
2014/07/28 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
调试php程序的简单步骤
2019/10/04 PHP
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
jquery判断元素的子元素是否存在的示例代码
2014/02/04 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
Vue实现购物车实例代码两则
2020/05/30 Javascript
python的keyword模块用法实例分析
2015/06/30 Python
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
python魔法方法-自定义序列详解
2016/07/21 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
大学应届毕业生个人求职信
2013/09/23 职场文书
大学生职业生涯规划书模板
2014/01/18 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
安全生产月演讲稿
2014/05/09 职场文书
团结友爱主题班会
2015/08/13 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技