分享一个原生的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异步按一定的时间间隔刷新问题
Dec 10 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 Javascript
JavaScript中的LHS和RHS分析详情
Apr 06 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原理之执行周期分析
2016/06/01 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
js CSS操作方法集合
2008/10/31 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
记录vue项目中遇到的一点小问题
2019/05/14 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
wxpython学习笔记(推荐查看)
2014/06/09 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
银行求职推荐信范文
2013/11/30 职场文书
《乡愁》教学反思
2014/02/18 职场文书
员工入职担保书范文
2014/04/01 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
水电维修专业推荐信
2014/09/06 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis
java多态注意项小结
2021/10/16 Java/Android
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL