原生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 相关文章推荐
JS获取地址栏参数的几种方法小结
Feb 28 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
深入Vue-Router路由嵌套理解
Aug 13 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
ztree+ajax实现文件树下载功能
May 18 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
德劲1107的电路分析与打磨
2021/03/02 无线电
用在PHP里的JS打印函数
2006/10/09 PHP
关于文本留言本的分页代码
2006/10/09 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
python类装饰器用法实例
2015/06/04 Python
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
python匿名函数的使用方法解析
2019/10/10 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
会计助理的岗位职责
2013/11/29 职场文书
职务聘任书范文
2014/03/29 职场文书
开学典礼演讲稿
2014/05/23 职场文书
开学典礼观后感
2015/06/15 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
python 实现图片特效处理
2022/04/03 Python