分享一个原生的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 相关文章推荐
javascript 硬盘序列号+其它硬件信息
Dec 23 Javascript
Jquery ui css framework
Jun 28 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
jquery使用each方法遍历json格式数据实例
May 18 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 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
php注销代码(session注销)
2012/05/31 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
jquery处理json对象
2014/11/03 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
推荐下python/ironpython:从入门到精通
2007/10/02 Python
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
Python字符串的一些操作方法总结
2019/06/10 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
单位单身证明范本
2014/01/11 职场文书
售后服务承诺书范文
2014/03/26 职场文书
建筑工地质量标语
2014/06/12 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
筑梦中国心得体会
2016/01/18 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript
php实现自动生成验证码的实例讲解
2021/11/17 PHP
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server