分享一个原生的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 $.ajax各个事件执行顺序
Oct 15 Javascript
jquery ajax abort()的使用方法
Oct 28 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 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运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
php轻松实现文件上传功能
2016/03/03 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
python友情链接检查方法
2015/07/08 Python
python处理按钮消息的实例详解
2017/07/11 Python
Python实现的快速排序算法详解
2017/08/01 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
internal修饰符起什么作用
2013/12/16 面试题
软件测试企业面试试卷
2016/07/13 面试题
农救科工作职责
2013/11/27 职场文书
《口技》教学反思
2014/02/21 职场文书
经典英文广告词
2014/03/18 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
党支部培养考察意见
2015/06/02 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书