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 相关文章推荐
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
简单的jQuery入门指引
Jul 28 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
JS判断微信扫码的方法
Aug 07 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
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
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
PHP安全性漫谈
2012/06/28 PHP
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
js 解决“options为空或不是对象”
2008/12/22 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
Web技术实现移动监测的介绍
2017/09/18 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
简单理解Python中基于生成器的状态机
2015/04/13 Python
Python简单读取json文件功能示例
2017/11/30 Python
python xpath获取页面注释的方法
2019/01/14 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
Python常用数据分析模块原理解析
2020/07/20 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
生物技术研究生自荐信
2013/11/12 职场文书
自荐书4要点
2014/01/25 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
项目安全员岗位职责
2015/02/15 职场文书
会议主持人开场白台词
2015/05/28 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python