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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
js实现漫天星星效果
Jan 19 Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 Javascript
Vue实现附件上传功能
May 28 Javascript
antd form表单数据回显操作
Nov 02 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
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
JavaScript OOP类与继承
2009/11/15 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
python中time库的实例使用方法
2019/10/31 Python
安踏官方商城:anta.cn
2019/12/16 全球购物
大学毕业自我评价
2014/02/02 职场文书
心理健康活动总结
2014/04/30 职场文书
村委会换届选举方案
2014/05/03 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
MySQL之DML语言
2021/04/05 MySQL
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫