原生javascript实现拖动元素示例代码


Posted in Javascript onSeptember 01, 2014

本文介绍原生javascript实现元素拖动。

思路:

1.首先改变被拖动元素的布局属性,关键是“position:absolue”;

2.捕捉鼠标事件"mousedown","mousemove","mouseup";

3.当触发"mousedown"时,记录下当前鼠标在元素中的相对位置,_x,_y;

4.紧接着处理"mousemove"事件,通过改变元素的top和left属性来移动元素;

5.当触发"mouseup"时间时,终止拖动。

同时,应考虑代码的封装性和浏览器的兼容性,代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<title>draggable div</title> 
<style type="text/css"> 
body{ 
margin: 0; 
padding: 0; 
background-color: #fff; 
} 

#drag_div{ 
width: 150px; 
height: 150px; 
padding: 10px; 
margin: 10px; 
background-color: #66dd33; 
cursor: move; 
} 
</style> 
</head> 
</html> 
<body> 
<div id="drag_div"></div> 
</body> 
<script type="text/javascript"> 

function Drag () { 
this.initialize.apply(this, arguments); 
} 

Drag.prototype = { 

// 初始化 
initialize : function (element, options) { 

this.element = this.$(element); // 被拖动的对象 
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.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.element.style.top = this.element.offsetTop + "px"; 
this.element.style.left = this.element.offsetLeft + "px"; 
this.element.style.position = "absolute"; 
this.element.style.margin = "0"; 
}, 

startDrag : function (event) { 
var event = event || window.event; 

this._x = event.clientX - this.element.offsetLeft; 
this._y = event.clientY - this.element.offsetTop; 

this.addHandler(document, "mousemove", this._moveDrag); 
this.addHandler(document, "mouseup", this._stopDrag); 

this.preventDefault(event); 

this.handle.setCapture && this.handle.setCapture(); 

this.onStart(); 
}, 
moveDrag : function (event) { 
var event = this.getEvent(event); 

var iTop = event.clientY - this._y; 
var iLeft = event.clientX - this._x; 

this.element.style.top = iTop + "px"; 
this.element.style.left = iLeft + "px"; 

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.element, //事件对象 
onStart : function () {}, // 开始时回调函数 
onMove : function(){}, // 拖拽时回调函数 
onStop : function(){} // 停止时回调函数 
}; 
for(var p in options){ 
this.options[p] = options[p]; 
} 
}, 
$ : function (id) { 
return typeof id === "string" ? document.getElementById(id):id; 
}, 
addHandler : function (element, eventType, handler) { 
if(element.addEventListener){ 
return element.addEventListener(eventType, handler, false); 
}else{ 
return element.attachEvent("on"+eventType, handler); 
} 
}, 
removeHandler : function (element, eventType, handler) { 
if(element.removeEventListener){ 
return element.removeEventListener(eventType, handler, false); 
}else{ 
return element.detachEvent("on" + eventType, handler); 
} 
}, 
getEvent: function (event) { 
return event || window.event; 
}, 
preventDefault: function (event) { 
if(event.preventDefault){ 
event.preventDefault(); 
}else{ 
event.returnValue = false; 
} 
}, 
bind : function (obj, handler) { 
return function () { 
return handler.apply(obj, arguments); 
} 
} 
}; 

window.onload = function () { 
var drag_div = document.getElementById("drag_div"); 

var drag = new Drag(drag_div, {handle: drag_div}); 
} 

</script> 
</html>
Javascript 相关文章推荐
jQuery阻止同类型事件小结
Apr 19 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
JavaScript设置表单上传时文件个数的方法
Aug 11 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
基于JSON数据格式详解
Aug 31 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
使用text方法获取Html元素文本信息示例
Sep 01 #Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 #Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 #Javascript
Html5的placeholder属性(IE兼容)实现代码
Aug 30 #Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 #Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 #Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 #Javascript
You might like
WHOIS类的修改版
2006/10/09 PHP
PHP三元运算符的结合性介绍
2012/01/10 PHP
php绘制一个矩形的方法
2015/01/24 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
python 实现aes256加密
2020/11/27 Python
python实现无边框进度条的实例代码
2020/12/30 Python
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
经典c++面试题四
2015/05/14 面试题
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
2014升学宴答谢词
2014/01/26 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
投标承诺书范本
2014/03/27 职场文书
作风建设年活动总结
2014/08/27 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
贫困证明书范文
2015/06/16 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang