分享一个原生的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中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
Vue 去除路径中的#号
Apr 19 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
微信小程序保持session会话的方法
Mar 20 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
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
python Django连接MySQL数据库做增删改查
2013/11/07 Python
python中kmeans聚类实现代码
2018/02/23 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
python中取绝对值简单方法总结
2020/07/24 Python
Python通过format函数格式化显示值
2020/10/17 Python
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
大学生毕业自我鉴定
2013/11/06 职场文书
实习单位接收函
2014/01/11 职场文书
劳动之星获奖感言
2014/02/01 职场文书
无传销社区工作方案
2014/05/13 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
windows安装python超详细图文教程
2021/05/21 Python
python字典进行运算原理及实例分享
2021/08/02 Python