原生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 弹出层 定位至屏幕居中示例
May 21 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
angularJs提交文本框数据到后台的方法
Oct 08 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 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使用timthumb生成缩略图的方法
2016/01/22 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
原生js实现滑块区间组件
2021/01/20 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
Python使用chardet判断字符编码
2015/05/09 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
室内设计实习自我鉴定
2013/09/25 职场文书
应届生如何写自荐信
2014/01/05 职场文书
英文推荐信格式范文
2014/05/09 职场文书
出纳试用期自我评价
2015/03/10 职场文书
荒岛余生观后感
2015/06/09 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
mysql 带多个条件的查询方式
2021/06/05 MySQL
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
vue打包时去掉所有的console.log
2022/04/10 Vue.js
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python