[原创] 无聊，写了个拖拽代码 [复制链接]

winter

超级版主

5毛发一贴，千里不留行。

Rank: 8 Rank: 8

注册时间: 2007-2-27
威望: 3584
阅读权限: 150
积分: 8408
帖子: 3597
精华: 12
UID: 65747
状态: 当前离线

发表于 2007-12-25 23:11:25 |显示全部楼层 |串个门|加好友|打招呼|发消息 |

一键分享

<style>
.dragArea{
background-color:blue;
filter:alpha(opacity=50);
-moz-opacity:0.5;
}
body{
margin:0px;
}
</style>
<body>
<div style="top:0px;left:0px;width:100px;height:100px;position:absolute;background:black;" onselectstart="return false;"
onmousedown="mousedown.apply(this,arguments);">
</div>
</body>
<script type="text/javascript">
/***********************************************************************
* 函数名：startdrag
* 说明：开始一段拖动行为，检查拖动行为的过程和终止并响应相应的事件。
* 参数：
* parent DOM对象，拖动所属的父对象，必需是容器，可以为document.body
* onmove 函数对象，事件，拖动开始后，鼠标移动触发事件
* onfinish 函数对象，事件，拖动结束时，触发事件一次
* area 对象，可以缺省，必须包含4个属性top left width height，以指定鼠标移动的有效范围，默认值为parent的全部范围。
***********************************************************************/
function startdrag(parent,onmove,onfinish,area)
{
var up,out,over;
var divarea=document.createElement("div");
if(!area)area={
"top":"0px",
"left":"0px",
"width":"100%",
"height":"100%"
}
divarea.style.position="absolute";
divarea.style.top=area.top;
divarea.style.left=area.left;
divarea.style.width=area.width;
divarea.style.height=area.height;
divarea.style.overflow="hidden";
divarea.style.zIndex="10000";
divarea.className="dragArea";
parent.appendChild(divarea);
if(divarea.attachEvent)
{
divarea.attachEvent("onmousemove",onmove)
document.attachEvent("onmouseup",up=function(){
divarea.detachEvent("onmousemove",onmove);
document.detachEvent("onmouseup",up);
divarea.detachEvent("onmouseout",out);
parent.removeChild(divarea);
onfinish(event||arguments[0]);
});
divarea.attachEvent("onmouseout",out=function(){
divarea.detachEvent("onmousemove",onmove);
document.detachEvent("onmouseup",up);
divarea.detachEvent("onmouseout",out);
parent.removeChild(divarea);
onfinish(event||arguments[0]);
});
}
else if(divarea.addEventListener)
{
divarea.addEventListener("mousemove",onmove,true);
document.addEventListener("mouseup",up=function(){
divarea.removeEventListener("mousemove",onmove,true);
document.removeEventListener("mouseup",up,true);
divarea.removeEventListener("mouseout",out,true);
parent.removeChild(divarea);
onfinish(event||arguments[0]);
},true);
divarea.addEventListener("mouseout",out=function(){
//alert("out");
divarea.removeEventListener("mousemove",onmove,true);
document.removeEventListener("mouseup",up,true);
divarea.removeEventListener("mouseout",out,true);
parent.removeChild(divarea);
onfinish(event||arguments[0]);
},true);
}
}
</script>
<script type="text/javascript">
function mousedown()
{
var e=arguments[0]||event;
var me=this;
var dy=e.clientY-parseInt(me.style.top);
var dx=e.clientX-parseInt(me.style.left);
startdrag(
document.body,
function(e){
e=e||event;
if(e.clientY-dy<0||e.clientY-dy>parseInt(document.body.clientHeight)-100)return;
if(e.clientX-dx<0||e.clientX-dx>parseInt(document.body.clientWidth)-100)return;
me.style.top=e.clientY-dy;
me.style.left=e.clientX-dx;
},
function(e){
}
);
}
</script>

复制代码运行代码另存代码

[php]<style>

.dragArea{
background-color:blue;
filter:alpha(opacity=50);
-moz-opacity:0.5;
}

body{
margin:0px;
}
</style>
<body>
<div style="top:0px;left:0px;width:100px;height:100px;position:absolute;background:black;" onselectstart="return false;"
onmousedown="mousedown.apply(this,arguments);">
</div>
</body>
<script type="text/javascript">
/***********************************************************************
* 函数名：startdrag
* 说明：开始一段拖动行为，检查拖动行为的过程和终止并响应相应的事件。
* 参数：
* parent DOM对象，拖动所属的父对象，必需是容器，可以为document.body
* onmove 函数对象，事件，拖动开始后，鼠标移动触发事件
* onfinish 函数对象，事件，拖动结束时，触发事件一次
* area 对象，可以缺省，必须包含4个属性top left width height，以指定鼠标移动的有效范围，默认值为parent的全部范围。
***********************************************************************/

function startdrag(parent,onmove,onfinish,area)
{
var up,out,over;

var divarea=document.createElement("div");
if(!area)area={
"top":"0px",
"left":"0px",
"width":"100%",
"height":"100%"
}
divarea.style.position="absolute";
divarea.style.top=area.top;
divarea.style.left=area.left;
divarea.style.width=area.width;
divarea.style.height=area.height;
divarea.style.overflow="hidden";
divarea.style.zIndex="10000";
divarea.className="dragArea";
parent.appendChild(divarea);

if(divarea.attachEvent)
{
divarea.attachEvent("onmousemove",onmove)
document.attachEvent("onmouseup",up=function(){
divarea.detachEvent("onmousemove",onmove);
document.detachEvent("onmouseup",up);
divarea.detachEvent("onmouseout",out);
parent.removeChild(divarea);
onfinish(event||arguments[0]);
});
divarea.attachEvent("onmouseout",out=function(){
divarea.detachEvent("onmousemove",onmove);
document.detachEvent("onmouseup",up);
divarea.detachEvent("onmouseout",out);
parent.removeChild(divarea);
onfinish(event||arguments[0]);

});
}

else if(divarea.addEventListener)
{
divarea.addEventListener("mousemove",onmove,true);
document.addEventListener("mouseup",up=function(){
divarea.removeEventListener("mousemove",onmove,true);
document.removeEventListener("mouseup",up,true);
divarea.removeEventListener("mouseout",out,true);
parent.removeChild(divarea);
onfinish(event||arguments[0]);
},true);
divarea.addEventListener("mouseout",out=function(){
//alert("out");
divarea.removeEventListener("mousemove",onmove,true);
document.removeEventListener("mouseup",up,true);
divarea.removeEventListener("mouseout",out,true);
parent.removeChild(divarea);
onfinish(event||arguments[0]);
},true);
}

}
</script>
<script type="text/javascript">
function mousedown()
{
var e=arguments[0]||event;
var me=this;
var dy=e.clientY-parseInt(me.style.top);
var dx=e.clientX-parseInt(me.style.left);
startdrag(
document.body,
function(e){
e=e||event;
if(e.clientY-dy<0||e.clientY-dy>parseInt(document.body.clientHeight)-100)return;
if(e.clientX-dx<0||e.clientX-dx>parseInt(document.body.clientWidth)-100)return;
me.style.top=e.clientY-dy;
me.style.left=e.clientX-dx;
},
function(e){
}
);
}
</script>[/php]
特色是比较封装比较灵活附件里演示了各种变形最重要的是兼容IE6/IE7/FF/OP/SAFARI/NS

[ 本帖最后由 winter 于 2007-12-25 23:23 编辑 ]

附件: 你需要登录才可以下载或查看附件。没有帐号？加入无忧 

已有 1 人评分	威望	收起理由
biyuan	+ 10	原创内容

总评分: 威望 + 10 查看全部评分

帐号		自动登录	找回密码
密码			加入无忧

[原创] 无聊，写了个拖拽代码 [复制链接]

浏览过的版块