JS拖拽组件学习使用


Posted in Javascript onJanuary 19, 2016

JS代码需要常写,不然容易生疏,最近虽然一直在看JS的原型,行为委托等知识点,但是动手写代码的量略有减少。本文与大家分享一个拖拽组件,供大家参考,具体内容如下

首先,看一下拖拽的原理。

JS拖拽组件学习使用

被拖拽元素位置的变化,left值的变化其实就是鼠标位置水平方向的变化值,e.clientX - 鼠标左键按下时e.clientX。
top值的变化其实就是鼠标位置竖直方向的变化值,e.clientY - 鼠标左键按下时e.clientY。
另外就是设置拖拽的范围,上下左右不得超过父元素所在的区域。

function Drag (config){
      this.moveTarget = document.getElementById(config.id);
      if(config.parentId){
        this.targetParent = document.getElementById(config.parentId);
        this.max_left = this.targetParent.clientWidth - this.moveTarget.offsetWidth;
        this.max_top = this.targetParent.clientHeight - this.moveTarget.offsetHeight;
      }else{
        console.log(document.documentElement.clientHeight + "||" + this.moveTarget.offsetHeight)
        this.max_left = document.documentElement.clientWidth - this.moveTarget.offsetWidth - 
          parseInt(this.getStyle(document.body, "border-width"));
        this.max_top = document.documentElement.clientHeight - this.moveTarget.offsetHeight- 
          parseInt(this.getStyle(document.body, "border-width"));
      }      
      this.lock = true;
    }
    Drag.prototype.getStyle = function(element, attr){
      if(element.currentStyle){
        return element.currentStyle[attr];
      }else{
        return window.getComputedStyle(element,null).getPropertyValue(attr)
      }
    }
    Drag.prototype.moDown = function(e){
      e = e || window.event;
      this.clientX = e.clientX;
      this.clientY = e.clientY;
      //鼠标按下时,drag的left值,top值(写在style中或者是css中)
      this.startLeft = parseInt(this.moveTarget.style.left || this.getStyle(this.moveTarget, "left"));
      this.startTop = parseInt(this.moveTarget.style.top || this.getStyle(this.moveTarget, "top"));
      //鼠标按下时,鼠标的clientX值,clientY值
      this.startClientX = e.clientX;
      this.startClientY = e.clientY;
      this.lock = false;
    };
    Drag.prototype.moMove = function(e){
      e = e || window.event;
      if(e.which != 1){
        this.lock = true;
      }
      if(!this.lock){
        var realLeft = this.startLeft + e.clientX - this.startClientX;//实际的移动范围
        var realTop = this.startTop + e.clientY - this.startClientY;
          //rightLeft , rightTop; //left, top 取值(在可移动范围内)
        var rightLeft = realLeft > this.max_left ? this.max_left : ( realLeft > 0 ? realLeft : 0 );
        var rightTop = realTop > this.max_top ? this.max_top : ( realTop > 0 ? realTop : 0 );
        this.moveTarget.style.left = rightLeft + "px";
        this.moveTarget.style.top = rightTop + "px";
      }
    };
    Drag.prototype.moUp = function(e){
      e = e || window.event;
      this.lock = true;
    };
    Drag.prototype.startDrag = function(){
      console.log(this)
      this.moveTarget.onmousedown = function(e){this.moDown(e)}.bind(this);
      this.moveTarget.onmousemove = function(e){this.moMove(e)}.bind(this);
      this.moveTarget.onmouseup = function(e){this.moUp(e)}.bind(this);
    }

说明:moDown响应鼠标左键按下操作,moMove响应鼠标移动操作,MoUp响应鼠标抬起操作。

在moMove中增加了e.which判断,e.which ==1 表示鼠标左键按下,这是为了解决,鼠标移除可拖拽范围外,再移回时,无需按下左键,被拖拽元素就会跟着动的Bug。

使用说明:

在使用时,被拖拽元素的id是必须参数,父元素的id(即可以拖拽移动的范围)为可选参数,如果不传递父元素的id,则默认使用documentElement为可拖拽的范围。

如果传递父元素,请别忘了将父元素的定位设为position:relative或position:absolute。

在使用时,先引入拖拽插件的js文件。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="刘艳">
    <meta name="Keywords" content="关键字">
    <meta name="Description" content="描述">
    <title>Document</title>
    <style>
      *{
        margin:0px;
        padding:0px;
      }
      #content{
        width:600px;
        height:500px;
        position:relative;
        border:5px solid green;
      }
      #drag{
        position:absolute;
        height:100px;
        width:100px;
        top:50px;left:0px;
        background:pink;
        cursor:pointer;
      }
    </style>
  </head>
  <body>
    <div id = "content">
      <div id = "drag" >
      </div> 
    </div>
  </body>
</html>
<script src = "url/drag.js"></script>
<script>
  window.onload = function(){
    var drag = new Drag({id: "drag", parentId: "content"});
    drag.startDrag();

  }

</script>

如果您想在整个窗口中拖拽,请不要设置被拖拽元素的父元素的定位,即,使其相对body定位。

如果您需要对body定位,但是又需要设置其父元素的position为非static,那么您可以对本插件进行扩展。

希望本文对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
基于jQuery的星级评分插件
Aug 12 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 Javascript
JavaScript原型链中函数和对象的理解
Jun 16 Javascript
理解JS绑定事件
Jan 19 #Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 #Javascript
jQuery unbind()方法实例详解
Jan 19 #Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 #Javascript
详解JavaScript对象序列化
Jan 19 #Javascript
学习JavaScript设计模式之单例模式
Jan 19 #Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 #Javascript
You might like
PHP 判断变量类型实现代码
2009/10/23 PHP
需要注意的几个PHP漏洞小结
2012/02/05 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
取得元素的左和上偏移量的方法
2014/09/17 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
Python实现统计单词出现的个数
2015/05/28 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
浅谈django中的认证与登录
2016/10/31 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
py-charm延长试用期限实例
2019/12/22 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
中文教师求职信
2014/02/22 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
5s推行计划书
2014/05/06 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
社区元宵节活动总结
2015/02/06 职场文书
护理专业自我评价
2015/03/11 职场文书
百家讲坛观后感
2015/06/12 职场文书
python xlwt模块的使用解析
2021/04/13 Python
PHP中strval()函数实例用法
2021/06/07 PHP
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android