自己封装的一个原生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 相关文章推荐
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
js中使用replace方法完成某个字符的转换
Aug 20 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
JS三级可折叠菜单实现方法
Feb 29 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
vscode自定义vue模板的实现
Jan 27 Vue.js
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
对盗链说再见...
2006/10/09 PHP
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
关于反爬虫的一些简单总结
2017/12/13 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
使用python绘制温度变化雷达图
2019/10/18 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
python pillow库的基础使用教程
2021/01/13 Python
介绍一下linux的文件权限
2014/07/20 面试题
职高毕业生自我鉴定
2013/10/21 职场文书
幼儿园老师辞职信
2014/01/20 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
室内拓展活动方案
2014/02/13 职场文书
网络编辑求职信
2014/04/30 职场文书
住宅使用说明书
2014/05/09 职场文书
关于童年的读书笔记
2015/06/26 职场文书
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
无线电知识基础入门篇
2022/02/18 无线电
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸
Golang并发工具Singleflight
2022/05/06 Golang