分享一个原生的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 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
jquery 滚动条事件简单实例
Jul 12 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
Mar 15 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 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极大的增强功能和性能
2006/10/09 PHP
PHP静态新闻列表自动生成代码
2007/06/14 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
详解JS数值Number类型
2018/02/07 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
js实现简单点赞操作
2020/03/17 Javascript
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
python机器学习之KNN分类算法
2018/08/29 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
JAVA中运算符的分类及举例
2015/09/12 面试题
专科应届生求职信
2013/11/24 职场文书
计算机专业毕业生求职信分享
2013/12/24 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
Python数据处理的三个实用技巧分享
2022/04/01 Python