分享一个原生的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中定义对象类别
Dec 22 Javascript
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
javascript定义函数的方法
Dec 06 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 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 编写的 25个游戏脚本
2009/05/11 PHP
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
2014/06/07 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
js date 格式化
2017/02/15 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
python使用正则表达式替换匹配成功的组
2017/11/17 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
金蝶的一道SQL笔试题
2012/12/18 面试题
出纳岗位职责范本
2013/12/01 职场文书
考博专家推荐信模板
2013/12/02 职场文书
初三家长会邀请函
2014/01/18 职场文书
学校国庆节活动总结
2015/03/23 职场文书
公司表扬信格式
2015/05/04 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书