JS基于面向对象实现的拖拽库实例


Posted in Javascript onSeptember 24, 2015

本文实例讲述了JS基于面向对象实现的拖拽库。分享给大家供大家参考。具体如下:

这是一个面向对象的JS拖拽库,可设置水平锁定、垂直锁定、锁定位置、锁定范围等,设定这些范围后,只能在设定的模式下拖动,我觉得这是个挺不错的拖拽实例。

运行效果截图如下:

JS基于面向对象实现的拖拽库实例

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖拽库</title>
<style type="text/css"> 
div,h2,p{margin:0;padding:0;}
body{font:14px/1.5 arial;}
#box{width:100px;height:100px;background:#fef4eb;padding:5px;margin:50px;border:1px solid #f60;}
#box .title{height:25px;background:#f60;}
#tool{margin-bottom:10px;}
</style>
<script type="text/javascript"> 
function Drag()
{
 //初始化
 this.initialize.apply(this, arguments)
}
Drag.prototype = {
 //初始化
 initialize : function (drag, options)
 {
  this.drag = this.$(drag);
  this._x = this._y = 0;
  this._moveDrag = this.bind(this, this.moveDrag);
  this._stopDrag = this.bind(this, this.stopDrag);
  
  this.setOptions(options);
  
  this.handle = this.$(this.options.handle);
  this.maxContainer = this.$(this.options.maxContainer);
  
  this.maxTop = Math.max(this.maxContainer.clientHeight, this.maxContainer.scrollHeight) - this.drag.offsetHeight;
  this.maxLeft = Math.max(this.maxContainer.clientWidth, this.maxContainer.scrollWidth) - this.drag.offsetWidth;
  this.limit = this.options.limit;
  this.lockX = this.options.lockX;
  this.lockY = this.options.lockY;
  this.lock = this.options.lock;
  this.onStart = this.options.onStart;
  this.onMove = this.options.onMove;
  this.onStop = this.options.onStop;
  this.handle.style.cursor = "move";
  this.changeLayout();
  this.addHandler(this.handle, "mousedown", this.bind(this, this.startDrag))
 },
 changeLayout : function ()
 {
  this.drag.style.top = this.drag.offsetTop + "px";
  this.drag.style.left = this.drag.offsetLeft + "px";
  this.drag.style.position = "absolute";
  this.drag.style.margin = "0"
 },
 startDrag : function (event)
 {  
  var event = event || window.event;
  this._x = event.clientX - this.drag.offsetLeft;
  this._y = event.clientY - this.drag.offsetTop;
  this.addHandler(document, "mousemove", this._moveDrag);
  this.addHandler(document, "mouseup", this._stopDrag);
  event.preventDefault && event.preventDefault();
  this.handle.setCapture && this.handle.setCapture();
  this.onStart()
 },
 moveDrag : function (event)
 {
  var event = event || window.event;
  var iTop = event.clientY - this._y;
  var iLeft = event.clientX - this._x;
  if (this.lock) return;
  this.limit && (iTop < 0 && (iTop = 0), iLeft < 0 && (iLeft = 0), iTop > this.maxTop && (iTop = this.maxTop), iLeft > this.maxLeft && (iLeft = this.maxLeft));
  this.lockY || (this.drag.style.top = iTop + "px");
  this.lockX || (this.drag.style.left = iLeft + "px");
  event.preventDefault && event.preventDefault();
  this.onMove()
 },
 stopDrag : function ()
 {
  this.removeHandler(document, "mousemove", this._moveDrag);
  this.removeHandler(document, "mouseup", this._stopDrag);
  this.handle.releaseCapture && this.handle.releaseCapture();
  this.onStop()
 },
 //参数设置
 setOptions : function (options)
 {
  this.options =
  {
   handle:   this.drag, //事件对象
   limit:   true, //锁定范围
   lock:   false, //锁定位置
   lockX:   false, //锁定水平位置
   lockY:   false, //锁定垂直位置
   maxContainer: document.documentElement || document.body, //指定限制容器
   onStart:  function () {}, //开始时回调函数
   onMove:   function () {}, //拖拽时回调函数
   onStop:   function () {} //停止时回调函数
  };
  for (var p in options) this.options[p] = options[p]
 },
 //获取id
 $ : function (id)
 {
  return typeof id === "string" ? document.getElementById(id) : id
 },
 //添加绑定事件
 addHandler : function (oElement, sEventType, fnHandler)
 {
  return oElement.addEventListener ? oElement.addEventListener(sEventType, fnHandler, false) : oElement.attachEvent("on" + sEventType, fnHandler)
 },
 //删除绑定事件
 removeHandler : function (oElement, sEventType, fnHandler)
 {
  return oElement.removeEventListener ? oElement.removeEventListener(sEventType, fnHandler, false) : oElement.detachEvent("on" + sEventType, fnHandler)
 },
 //绑定事件到对象
 bind : function (object, fnHandler)
 {
  return function ()
  {
   return fnHandler.apply(object, arguments)
  }
 }
};
//应用
window.onload = function ()
{
 var oBox = document.getElementById("box");
 var oTitle = oBox.getElementsByTagName("h2")[0];
 var oSpan = document.getElementsByTagName("span")[0];
 var oDrag = new Drag(oBox, {handle:oTitle, limit:false});
 var aInput = document.getElementsByTagName("input");
 //锁定范围接口
 aInput[0].onclick = function ()
 {
  oDrag.limit = !oDrag.limit;
  this.value = oDrag.limit ? "取消锁定范围" : "锁定范围"
 };
 
 //水平锁定接口
 aInput[1].onclick = function ()
 {
  oDrag.lockX = !oDrag.lockX;
  this.value = oDrag.lockX ? "取消水平锁定" : "水平锁定"
 };
 
 //垂直锁定接口
 aInput[2].onclick = function ()
 {
  oDrag.lockY = !oDrag.lockY;
  this.value = oDrag.lockY ? "取消垂直锁定" : "垂直锁定"
 };
 
 //锁定位置接口
 aInput[3].onclick = function ()
 {
  oDrag.lock = !oDrag.lock;
  this.value = oDrag.lock ? "取消锁定位置" : "锁定位置"
 };
 
 //开始拖拽时方法
 oDrag.onStart = function ()
 {
  oSpan.innerHTML = "开始拖拽"
 };
 
 //开始拖拽时方法
 oDrag.onMove = function ()
 {
  oSpan.innerHTML = "left:" + this.drag.offsetLeft + ", top:" + this.drag.offsetTop
 };
 //开始拖拽时方法
 oDrag.onStop = function ()
 {
  oSpan.innerHTML = "结束拖拽"
 };
};
</script>
</head>
<body>
<div id="tool">
<input type="button" value="锁定范围" />
 <input type="button" value="水平锁定" />
 <input type="button" value="垂直锁定" />
 <input type="button" value="锁定位置" />
</div>
<p>拖放状态:<span>未开始</span></p>
<div id="box">
 <h2 class="title"></h2>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
JS将秒换成时分秒实现代码
Sep 03 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
Nov 22 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
d3.js实现立体柱图的方法详解
Apr 28 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 #Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 #Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 #Javascript
js中不同的height, top的区别对比
Sep 24 #Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 #Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 #Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 #Javascript
You might like
解决GD中文乱码问题
2007/02/14 PHP
用php+javascript实现二级级联菜单的制作
2008/05/06 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
js 实现在2d平面上画8的方法
2018/10/10 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
微信小程序调用后台service教程详解
2020/11/06 Javascript
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
详解Python发送email的三种方式
2018/10/18 Python
Python Flask框架扩展操作示例
2019/05/03 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
python 实现简单的FTP程序
2019/12/27 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
法国在线药房:1001Pharmacies
2021/03/07 全球购物
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
美德少年事迹材料
2014/01/23 职场文书
优秀研究生主要事迹
2014/06/03 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL