winter
超级版主
5毛发一贴，千里不留行。
UID 65747
精华
11
积分 7582
帖子 3353
威望 3335
阅读权限 150
注册 2007-2-27
状态 离线
|
|
|
无聊，写了个拖拽代码
提示：您可以先修改部分代码再运行
<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>
特色是比较封装比较灵活 附件里演示了各种变形 最重要的是 兼容IE6/IE7/FF/OP/SAFARI/NS
[[i] 本帖最后由 winter 于 2007-12-25 23:23 编辑 [/i]]
 附件: 您所在的用户组无法下载或查看附件
|
|
|
|
