分享一个原生的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 相关文章推荐
JS控件的生命周期介绍
Oct 22 Javascript
JQuery基础语法小结
Feb 27 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
在JavaScript中操作时间之getMonth()方法的使用
Jun 10 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
Vue项目移动端滚动穿透问题的实现
May 19 Javascript
js+css实现扇形导航效果
Aug 18 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 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读取文件并可支持远程文件的代码分享
2012/10/03 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
python读写csv文件的方法
2019/08/13 Python
python编写简单端口扫描器
2019/09/04 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
巴西在线鞋店:Shoestock
2017/10/28 全球购物
保护环境的建议书
2014/03/12 职场文书
学党史心得体会
2014/09/05 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
趣味运动会标语口号
2015/12/26 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书