js完美的div拖拽实例代码


Posted in Javascript onJanuary 22, 2014
<!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>
</td>
   </tr>
 </table>
Javascript 相关文章推荐
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
跟我学习javascript的this关键字
May 28 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
jquery中对于批量deferred的处理方法
Jan 22 #Javascript
jquery基础教程之deferred对象使用方法
Jan 22 #Javascript
jquery each的几种常用的使用方法示例
Jan 21 #Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 #Javascript
javascript break指定标签打破多层循环示例
Jan 20 #Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 #Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 #Javascript
You might like
实用函数2
2007/11/08 PHP
提高php运行速度的一些小技巧分享
2012/07/03 PHP
smarty自定义函数用法示例
2016/05/20 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
Python不规范的日期字符串处理类
2014/06/10 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
自我鉴定总结
2014/03/24 职场文书
大学生英语演讲稿
2014/04/24 职场文书
国际贸易专业求职信
2014/06/04 职场文书
啦啦队口号大全
2014/06/16 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
教师党员承诺书2015
2015/01/21 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫