分享一个原生的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 简短右键菜单 多浏览器兼容
Jan 01 Javascript
jQuery 操作option的实现代码
Mar 03 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
jquery实用技巧之输入框提示语句
Jul 28 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 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 破解防盗链图片函数
2008/12/09 PHP
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
python脚本内运行linux命令的方法
2015/07/02 Python
python实现键盘输入的实操方法
2019/07/16 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
.net工程师笔试题
2012/06/09 面试题
白酒市场开发计划书
2014/01/09 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
十佳护士先进事迹
2014/05/08 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
综合素质评价自我评价
2015/03/06 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS