分享一个原生的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 相关文章推荐
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
Taro小程序自定义顶部导航栏功能的实现
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配置文件中最常用四个ini函数
2007/03/19 PHP
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
Python面向对象特殊成员
2017/04/24 Python
Python断言assert的用法代码解析
2018/02/03 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
Python argparse模块应用实例解析
2019/11/15 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
C++的几个面试题附答案
2016/08/03 面试题
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
自我评价的范文
2014/02/02 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
泰山导游词
2015/02/02 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
golang操作rocketmq的示例代码
2022/04/06 Golang
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python