原生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 相关文章推荐
用 Javascript 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
jQuery简单实现日历的方法
May 04 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
webpack结合express实现自动刷新的方法
May 07 Javascript
使用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
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
js的toLowerCase方法用法实例
2015/01/27 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
Python 的AES加密与解密实现
2019/07/09 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
python getpass实现密文实例详解
2019/09/24 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
英国女性时尚品牌:Apricot
2018/12/04 全球购物
党员一句话承诺大全
2014/03/28 职场文书
银行求职信范文
2014/05/26 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
pytorch中的 .view()函数的用法介绍
2022/03/17 Python