完美的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 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
js检测客户端不是firefox则提示下载
Apr 07 Javascript
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
Jquery Ajax请求代码(2)
Jan 07 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
js数组实现权重概率分配
Sep 12 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 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入门的学习方法
2007/01/02 PHP
php 结果集的分页实现代码
2009/03/10 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
浅谈Vuex的状态管理(全家桶)
2017/11/04 Javascript
总结js函数相关知识点
2018/02/27 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
Python import用法以及与from...import的区别
2015/05/28 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
django项目搭建与Session使用详解
2018/10/10 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
师范应届毕业生自荐信
2013/11/18 职场文书
2014年党务公开方案
2014/05/08 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
护理自荐信
2019/05/14 职场文书
OpenCV-Python实现轮廓拟合
2021/06/08 Python
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS