javascript简单拖拽实现代码(鼠标事件 mousedown mousemove mouseup)
2012-05-23 00:00
901 查看
mousedown 的时候创建拖动对象,mouseup的时候释放对象,原理弄清楚了其实很简单。
简单拖拽实现代码:
简单拖拽实现
*{margin:0;padding:0;}
#box{ margin:20px auto; position:relative; width:400px; height:400px; background:#ccc; border:1px solid #333; postion:relative; }
#dragBox{ width:50px; height:50px; text-align:center; line-height: 50px;position: absolute; background:blue; cursor:move; font-size:12px; color:#fff;}
拖我
var VVG = {}; //命名空间
VVG.DOM = {
$: function(id) { //创建方便的选择符
return typeof id == "string" ? document.getElementById(id) : id;
},
bindEvent: function(node, type, func) { //事件绑定方法
if (node.addEventListener) {
node.addEventListener(type, func, false);
} else if (node.attachEvent) {
node.attachEvent("on" + type, func);
} else {
node["on" + type] = func;
}
},
getEvent: function(event) { //获取事件
return event ? event : window.event;
},
getTarget: function(event) { //获取事件目标
return event.target || event.srcElement;
}
}
var DragDrop = function() { //新建一个返回对象的函数
var box = VVG.DOM.$("box"); //获取外围BOX
var dragBox = VVG.DOM.$("dragBox");//获取需要拖动的BOX
var dragging = null; //初始化对象
function drag(event) { //事件执行函数
event = VVG.DOM.getEvent(event);
var target = VVG.DOM.getTarget(event);
switch (event.type) {//判断事件类型
case "mousedown":
if(target.id == "dragBox"){ //当事件对象的ID等于要拖动的BOX的ID时
dragging = target; //赋值到拖动目标
}
break;
case "mousemove":
if(dragging){ //当有拖动目标时执行
sTop = document.documentElement.scrollTop || document.body.scrollTop; //当有滚动条的时候卷去页面的高度
dragging.style.left = (event.clientX - box.offsetLeft - dragBox.offsetWidth/2) + "px";
dragging.style.top = (event.clientY + sTop - box.offsetTop - dragBox.offsetHeight/2 ) + "px";
var left = parseInt(dragging.style.left);
var top = parseInt(dragging.style.top);
//console.log("left:"+left+"-----top:"+top + "-------sTop:"+sTop);
// 比较坐标是否超出外围的BOX
if(left < 0){
dragging.style.left = 0 +"px";
}
if(top < 0){
dragging.style.top = 0+"px";
}
if(left > box.offsetWidth - dragBox.offsetWidth){
dragging.style.left = (box.offsetWidth - dragBox.offsetWidth - 2 )+"px";
}
if(top > box.offsetHeight - dragBox.offsetHeight){
dragging.style.top =( box.offsetHeight - dragBox.offsetHeight - 2 )+"px";
}
}
break;
case "mouseup":
// 清空拖动目标
dragging = null;
break;
}
};
return {
dragStart: function() {
// 绑定事件
VVG.DOM.bindEvent(document, "mousedown", drag);
VVG.DOM.bindEvent(document, "mousemove", drag);
VVG.DOM.bindEvent(document, "mouseup", drag);
}
}
}();
DragDrop.dragStart();
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
简单拖拽实现代码:
简单拖拽实现
*{margin:0;padding:0;}
#box{ margin:20px auto; position:relative; width:400px; height:400px; background:#ccc; border:1px solid #333; postion:relative; }
#dragBox{ width:50px; height:50px; text-align:center; line-height: 50px;position: absolute; background:blue; cursor:move; font-size:12px; color:#fff;}
拖我
var VVG = {}; //命名空间
VVG.DOM = {
$: function(id) { //创建方便的选择符
return typeof id == "string" ? document.getElementById(id) : id;
},
bindEvent: function(node, type, func) { //事件绑定方法
if (node.addEventListener) {
node.addEventListener(type, func, false);
} else if (node.attachEvent) {
node.attachEvent("on" + type, func);
} else {
node["on" + type] = func;
}
},
getEvent: function(event) { //获取事件
return event ? event : window.event;
},
getTarget: function(event) { //获取事件目标
return event.target || event.srcElement;
}
}
var DragDrop = function() { //新建一个返回对象的函数
var box = VVG.DOM.$("box"); //获取外围BOX
var dragBox = VVG.DOM.$("dragBox");//获取需要拖动的BOX
var dragging = null; //初始化对象
function drag(event) { //事件执行函数
event = VVG.DOM.getEvent(event);
var target = VVG.DOM.getTarget(event);
switch (event.type) {//判断事件类型
case "mousedown":
if(target.id == "dragBox"){ //当事件对象的ID等于要拖动的BOX的ID时
dragging = target; //赋值到拖动目标
}
break;
case "mousemove":
if(dragging){ //当有拖动目标时执行
sTop = document.documentElement.scrollTop || document.body.scrollTop; //当有滚动条的时候卷去页面的高度
dragging.style.left = (event.clientX - box.offsetLeft - dragBox.offsetWidth/2) + "px";
dragging.style.top = (event.clientY + sTop - box.offsetTop - dragBox.offsetHeight/2 ) + "px";
var left = parseInt(dragging.style.left);
var top = parseInt(dragging.style.top);
//console.log("left:"+left+"-----top:"+top + "-------sTop:"+sTop);
// 比较坐标是否超出外围的BOX
if(left < 0){
dragging.style.left = 0 +"px";
}
if(top < 0){
dragging.style.top = 0+"px";
}
if(left > box.offsetWidth - dragBox.offsetWidth){
dragging.style.left = (box.offsetWidth - dragBox.offsetWidth - 2 )+"px";
}
if(top > box.offsetHeight - dragBox.offsetHeight){
dragging.style.top =( box.offsetHeight - dragBox.offsetHeight - 2 )+"px";
}
}
break;
case "mouseup":
// 清空拖动目标
dragging = null;
break;
}
};
return {
dragStart: function() {
// 绑定事件
VVG.DOM.bindEvent(document, "mousedown", drag);
VVG.DOM.bindEvent(document, "mousemove", drag);
VVG.DOM.bindEvent(document, "mouseup", drag);
}
}
}();
DragDrop.dragStart();
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关文章推荐
- javascript简单拖拽实现代码(鼠标事件 mousedown mousemove mouseup)
- JavaScript鼠标事件onmousedown,onmousemove,onmouseout,onmouseover,onmouseup的用法和区别详解
- JavaScript onmousedown选择元素,onmousemove拖动元素,onmouseup松开鼠标,磁性吸附效果示例
- javascript:用mousedown和mouseup实现的鼠标拖动事件
- 使用javaScript实现鼠标拖拽事件
- 19,事件中级,默认事件,renturn false,拖拽,onmousedown,onmousemove,onmouseup
- html5鼠标事件HTML onmousedown,up,over,out,move 事件属性
- Javascript动态绑定事件的简单实现代码
- javascript简单拖拽(鼠标事件 mousedown mousemove mouseup)
- 自定义View想使用Scroller实现滑动效果,但是事件接收出现问题,只收到ACTION_DOWN,而无法收到ACTION_MOVE, ACTION_UP等消息的处理
- Javascript动态绑定事件的简单实现代码
- 使用mouse事件实现简单的鼠标经过特效
- Extjs鼠标长按事件(实现长按按钮触发事件的方法:mousedown、mouseup)
- 实现简单的鼠标拖拽事件
- html5实现拖放以及mouse事件实现简单拖拽
- Silverlight学习笔记(七)-----Silverlight事件处理之鼠标事件实现简单拖拽
- 使用mouse事件实现简单的鼠标经过特效
- 超酷的鼠标拖拽翻页(分页)效果实现javascript代码
- Asp.net 2.0 GridView的几个事件(如实现: 行的双击/单击/捕捉键盘按键/鼠标悬浮/移出效果)(示例代码下载)