原生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创建含数字字母的随机字符串方法总结
Aug 01 Javascript
JavaScript动态数量的文件上传控件
Nov 18 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
vue axios 表单提交上传图片的实例
Mar 16 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 Javascript
Vue使用screenfull实现全屏效果
Sep 17 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
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
jquery异步请求实例代码
2011/06/21 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
js实现无缝轮播图
2020/03/09 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
python基础教程之匿名函数lambda
2017/01/17 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
pandas的排序和排名的具体使用
2019/07/31 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
保证书格式范文
2014/04/28 职场文书
预备党员公开承诺书
2014/05/28 职场文书
超市主管竞聘书
2015/09/15 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书
Python anaconda安装库命令详解
2021/10/16 Python