自己封装的一个原生JS拖动方法(推荐)


Posted in Javascript onNovember 22, 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 表示拖动点
*/

// 注意:如果省略拖动点,默认可拖动的区域是整个被拖动元素

以上就是小编为大家带来的自己封装的一个原生JS拖动方法(推荐)全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
JS中confirm,alert,prompt函数使用区别分析
Apr 01 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
浅谈对于react-thunk中间件的简单理解
May 01 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 #Javascript
javascript入门之window对象【新手必看】
Nov 22 #Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 #Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 #Javascript
AngularJS实现ajax请求的方法
Nov 22 #Javascript
js数组操作方法总结(必看篇)
Nov 22 #Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 #Javascript
You might like
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
php制作文本式留言板
2015/03/18 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现自动更换ip的方法
2015/05/05 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
学生出入校管理制度
2014/01/16 职场文书
财务人员担保书
2014/05/13 职场文书
美食节策划方案
2014/05/26 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
满月酒邀请函
2015/01/30 职场文书
青岛海底世界导游词
2015/02/11 职场文书
给朋友的道歉短信
2015/05/12 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
Python使用MapReduce进行简单的销售统计
2022/04/22 Python