分享一个原生的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 相关文章推荐
动态调用CSS文件的JS代码
Jul 29 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
微信小程序基础教程之echart的使用
Jun 01 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(2)
2006/10/09 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
Python深入学习之对象的属性
2014/08/31 Python
使用Python的PEAK来适配协议的教程
2015/04/14 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
详解python中的hashlib模块的使用
2019/04/22 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
解决django FileFIELD的编码问题
2020/03/30 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
大学生求职工作的自我评价
2014/02/13 职场文书
秋季运动会开幕词
2015/01/28 职场文书