原生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增加join方法的实现代码
Nov 28 Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
js倒计时小程序
Nov 05 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
如何开发出更好的JavaScript模块
Dec 22 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 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
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
php使用websocket示例详解
2014/03/12 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
input 输入框内的输入事件详细分析
2010/03/17 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
python字典键值对的添加和遍历方法
2016/09/11 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
财务会计应届生求职信
2013/11/24 职场文书
超市5.1促销活动
2014/01/15 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
学校元旦晚会方案
2014/02/19 职场文书
2014年环保局工作总结
2014/12/11 职场文书
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python