拖拽
2016-05-15 23:26
225 查看
http://www.cnblogs.com/NNUF/archive/2012/04/02/2430132.html
<!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>
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- UI界面设计
- 网页在线播放器 ····
- AIDL的全称是什么？如何工作？能处理哪些类型的数据？
- hdu 1175 连连看（BFS）
- 套接字模式
- css 内联与块
- 以自营模式提供标准化O2O家修服务，“牛牛好管家”注重维修团队的技能养成
- 你如何评价Android系统？优缺点。
- Cocos2d-3.x目录介绍分析
- PHP与Mysql的连接
- 1.3 Tomcat的下载和安装
- 记一次联想A820t救砖线刷
- 《网络攻防技术与实践》第十一周学习总结
- 输出集合的所有子集(幂集)-C语言
- BZOJ 2938 [Poi2000]病毒
- deeplearning4j中编译lombok配置
- BlockManager初始化和注册解密、BlockManagerMaster工作解密、BlockTransferService解密、本地数据读写解密、远程数据读写解密
- PySide——Python图形化界面入门教程（一）
- 中国的官办经济-陈经
- MVC中的简单路由