完美的js div拖拽实例代码


Posted in Javascript onSeptember 24, 2016

本文实例为大家分享了完美的js div拖拽实例代码,供大家参考,具体内容如下

<!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=GBK" />
<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 相关文章推荐
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
Jul 26 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
javascript 解决浏览器不支持的问题
Sep 24 #Javascript
JavaScript生成验证码并实现验证功能
Sep 24 #Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 #Javascript
javascript 分号总结及详细介绍
Sep 24 #Javascript
Bootstrap对话框使用实例讲解
Sep 24 #Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 #Javascript
angular.js之路由的选择方法
Sep 24 #Javascript
You might like
php多文件上传实现代码
2014/02/20 PHP
php实现搜索类封装示例
2016/03/31 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
Javascript学习笔记二 之 变量
2010/12/15 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
Python本地与全局命名空间用法实例
2015/06/16 Python
Python通过正则表达式选取callback的方法
2015/07/18 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
详解Django中异步任务之django-celery
2020/11/05 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
环保标语口号
2014/06/13 职场文书
同学聚会邀请函
2015/01/30 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
起诉意见书范文
2015/05/19 职场文书
电影雷锋观后感
2015/06/10 职场文书
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android