软件开发培训班 >> 编程开发 >> JavaScript

javascript简单拖拽实现代码(鼠标事件 mousedown mousemove mouseup)

　　本文标签：简单拖拽

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>简单拖拽实现</title> 
<style type="text/css"> 
*{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;} 
</style> 
</head> 
<body> 
<div id="box"> 
<div id="dragBox">拖我</div> 
</div> 
<script type="text/javascript"> 
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(); 
</script> 
</body> 
</html>

技术文章快速查找

jQuery表单验证插件formValidator(改进版)

关闭ie窗口清除Session的解决方法

玩转jQuery按钮请告诉我你最喜欢哪些？

Jquery 学习笔记（一）

简单JS自动提示文本框代码

从网易扒过来的js调用广告显示文件(随机几率)

Jquery 返回json数据在IE浏览器中提示下载的问题

javascript编程起步（第六课）

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建