分享一个原生的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 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
js类中的公有变量和私有变量
Jul 24 Javascript
基于jquery的动态创建表格的插件
Apr 05 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
May 27 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
js比较日期大小的方法
May 12 Javascript
js实现常见的工具条效果
Mar 02 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
JavaScript对象属性操作实例解析
Feb 04 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
实用函数10
2007/11/08 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
jQuery 性能优化指南(2)
2009/05/21 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
使用Python中的cookielib模拟登录网站
2015/04/09 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
特步官方商城:Xtep
2017/03/21 全球购物
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
九年级物理教学反思
2014/01/29 职场文书
培训讲师岗位职责
2014/04/13 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android