分享一个原生的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性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
eval的两组性能测试数据
Aug 17 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
react native 仿微信聊天室实例代码
Sep 17 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 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程序占用多少内存(memory_get_usage)
2012/09/23 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
javascript中的float运算精度实例分析
2010/08/21 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
Python生成随机数组的方法小结
2017/04/15 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
社团活动总结
2014/04/28 职场文书
人生遥控器观后感
2015/06/11 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python
Redis keys命令的具体使用
2022/06/05 Redis