自己封装的一个原生JS拖动方法(推荐)


Posted in Javascript onNovember 22, 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 表示拖动点
*/

// 注意:如果省略拖动点,默认可拖动的区域是整个被拖动元素

以上就是小编为大家带来的自己封装的一个原生JS拖动方法(推荐)全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
简单三步,搞掂内存泄漏
Mar 10 Javascript
javascript判断用户浏览器插件安装情况的代码
Jan 01 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 #Javascript
javascript入门之window对象【新手必看】
Nov 22 #Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 #Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 #Javascript
AngularJS实现ajax请求的方法
Nov 22 #Javascript
js数组操作方法总结(必看篇)
Nov 22 #Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 #Javascript
You might like
自定义PHP分页函数
2006/10/09 PHP
生成sessionid和随机密码的例子
2006/10/09 PHP
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
简单说明Python中的装饰器的用法
2015/04/24 Python
python使用mailbox打印电子邮件的方法
2015/04/30 Python
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
python 图像平移和旋转的实例
2019/01/10 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
鱼油专家:Omegavia
2016/10/10 全球购物
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
荣耀商城:HIHONOR
2020/11/03 全球购物
高中的职业生涯规划书
2013/12/28 职场文书
国家励志奖学金获奖感言
2014/01/09 职场文书
二年级学生评语大全
2014/04/23 职场文书
食品安全标语
2014/06/07 职场文书
中学生运动会口号
2014/06/07 职场文书
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫