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 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
JQuery中DOM加载与事件执行实例分析
Jun 13 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
PassWord输入框代码分享
Jun 07 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
Vue动态生成表格的行和列
Jul 18 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
理解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 MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
js 事件小结 表格区别
2007/08/13 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
python实现对一个完整url进行分割的方法
2015/04/29 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
django认证系统 Authentication使用详解
2019/07/22 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
浅谈Python3中print函数的换行
2020/08/05 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
全民健身日活动方案
2014/01/29 职场文书
运动会方阵口号
2014/06/07 职场文书
食品安全处置方案
2014/06/14 职场文书
药店促销活动总结
2014/07/10 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
2015年招生工作总结
2015/05/04 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android
德生2P3收音机开箱评测
2022/04/30 无线电