<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="支持" content="作者Ryan，技术支持Qq 3084532" />
<title>上面拖动</title>
<style type="text/css">
.stadium_member
{
width: 224px;
}
.stadium_member_title
{
font-weight: bold;
color: #51853B;
height: 25px;
width: 220px;
padding-left: 4px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #A1A1A1;
line-height: 25px;
cursor:default;
}
.stadium_member_tool
{
float: right;
}
.stadium_member_title h2
{
font-size: 14px;
margin: 0px;
float: left;
}
.stadium_member_content
{
width: 224px;
clear: both;
background-color:Olive;
}
.touming
{
filter: Alpha(opacity=50); /*ie 私有*/
-moz-opacity: .5;/*FireFox 私 生子*/
opacity: 0.5;/*W3C 之子*/
border:1px solid #333333;
}
</style>
</head>
<body>
<div id="stadium_memberDiv">
<div class="stadium_member">
<div class="stadium_member_title">
<h2>
忍 者神龟</h2>
<div class="stadium_member_tool">
<a href="javascript:void(0);" onclick="Stadium_mini(this);">-</a> <a href="javascript:void(0);" onclick="Stadium_close(this);">
X</a></div>
</div>
<div class="stadium_member_content">
米开朗基罗<br />
达芬奇<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
<div class="stadium_member">
<div class="stadium_member_title">
<h2>
我 的团长我的团</h2>
<div class="stadium_member_tool">
<a href="javascript:void(0);" onclick="Stadium_mini(this);">-</a> <a href="javascript:void(0);" onclick="Stadium_close(this);">
X</a></div>
</div>
<div class="stadium_member_content">
neirong</div>
</div>
<div class="stadium_member">
<div class="stadium_member_title">
<h2>
人 间大炮</h2>
<div class="stadium_member_tool">
<a href="javascript:void(0);" onclick="Stadium_mini(this);">-</a> <a href="javascript:void(0);" onclick="Stadium_close(this);">
X</a></div>
</div>
<div class="stadium_member_content">
neirong</div>
</div>
<div class="stadium_member">
<div class="stadium_member_title">
<h2>
魔 神坛斗士</h2>
<div class="stadium_member_tool">
<a href="javascript:void(0);" onclick="Stadium_mini(this);">-</a> <a href="javascript:void(0);" onclick="Stadium_close(this);">
X</a></div>
</div>
<div class="stadium_member_content">
neirong
<br />adfsdfsd<br />
光辉神<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
<p>
</p>
<p>
</p>
<div id="test"></div>
</body>
</html>
<script type="text/javascript">
<!--
var dragname="stadium_memberDiv";
function $(obj)
{
return typeof(obj)=="string"?document.getElementById(obj):obj;
}
function Stadium_mini(o)
{
if(window.isIE)
//他爹 的爹的爹的第二个孩子。
tagObj=o.parentNode.parentNode.parentNode.childNodes[1];
else
//他爹 的爹的爹的第四个孩子。（FF的私生子太多）
tagObj=o.parentNode.parentNode.parentNode.childNodes[3];
if(tagObj.style.display=="")
{
tagObj.style.display="none";
}
else
{
tagObj.style.display="";
}
}
function Stadium_close(o)
{
tagObj=o.parentNode.parentNode.parentNode;
tagObj.style.display="none";
}
window.οnlοad=function(){
on_ini();
menuAs=$(dragname).childNodes;
for(var i=0; i<menuAs.length;i++)
{
if(menuAs[i].className=="stadium_member")
{
if(window.isIE)//咱整 个拖动容易么，还TNND要jian各种东西。
drag(menuAs[i].firstChild);
else
drag(menuAs[i].childNodes[1]);
}
else
continue;
}
// var menuAs=$(dragname).getElementsByTagName("div");
// for(var i=0; i<menuAs.length; i++)
// {
// drag(menuAs[i]);
// }
};
function on_ini()
{
String.prototype.inc=function(s){return this.indexOf(s)>-1?true:false}
var agent=navigator.userAgent;
window.isOpr=agent.inc("Opera");
window.isIE=agent.inc("IE")&&!isOpr;
window.isMoz=agent.inc("Mozilla")&&!isOpr&&!isIE;
if(isMoz)
{
Event.prototype.__defineGetter__("x",function(){return this.clientX+2});
Event.prototype.__defineGetter__("y",function(){return this.clientY+2});
}
basic_ini();
}
function basic_ini()
{
//删除 节点
window.oDel=function(obj)
{
if($(obj)!=null)
{
$(obj).parentNode.removeChild($(obj));
}
}
}
function drag(dv){
dv.οnmοusedοwn=function(e){
var d=document;
e = e || window.event;
//左键 才可拖动
if (e.which == null)
/* IE case */
button= (e.button < 2) ? "LEFT" : ((e.button == 4) ? "MIDDLE" : "RIGHT");
else
/* All others */
button= (e.which < 2) ? "LEFT" : ((e.which == 2) ? "MIDDLE" : "RIGHT");
if(button!="LEFT")
{
return false;
}
//整个 父层移动
dv.pn=dv.parentNode;
var x= e.layerX || e.offsetX;
var y= e.layerY || e.offsetY;
dv.xy=getxy(dv.pn);
dv.mxy=
{
"mx":e.clientX-dv.xy.left,
"my":e.clientY-dv.xy.top
};//鼠标 在对象的内部位置 json数据 技术支持：http://www.ibm.com/developerworks/cn/web/wa-lo- json/
//设置 捕获范围
if(dv.setCapture){
dv.setCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
//拖动 事件是否首次启动 目的：阻止拖动对象上的click事件不被执行（IE)
var dragfirst=true;
//移动 函数
d.onmousemove=function(e){
e= e || window.event;
if(dragfirst)//拖动 事件启动 首次加载
{
//在原 有位置添加一个层
//创建 层
var om=document.createElement("div");
dv.otemp=om;
om.style.width=dv.xy.width + "px";
om.style.height=dv.xy.height + "px";
om.style.border="1px dashed #999999";
//om.style.background-color="#eeeeee";
dv.pn.parentNode.insertBefore(om,dv.pn);
//设置 该对象浮动
dv.pn.style.position="absolute";
dv.pn.oldcss=dv.pn.className;
dv.pn.className="touming";
dv.style.cursor="move";
dragfirst=false;
}
var tx=e.clientX-dv.mxy.mx;//-x;
var ty=e.clientY-dv.mxy.my;//-y;
dv.pn.style.left=tx+"px";
dv.pn.style.top=ty+"px";
createtmpl(dv,e);
d.onselectstart=function()
{
return false
}
};//end onmousemove
d.οnmοuseup=function(){
//取消 捕获范围
if(dv.releaseCapture){
dv.releaseCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
if(!dragfirst)
{
dv.otemp.parentNode.insertBefore(dv.pn,dv.otemp);
oDel(dv.otemp); dv.pn.style.position=""; dv.pn.className=dv.pn.oldcss; dv.style.cursor="";
}
//清除 事件
d.onmousemove=null; d.οnmοuseup=null; d.onselectstart=null;
};//end onmouseup
};
}//end function drag(dv)
//比 较，挨个层比较
function createtmpl(dv,e)
{
menuAs=$(dragname).childNodes;
//遍历 所有可拖动层
for(var i=0;i<menuAs.length;i++)
{
if(menuAs[i]==dv.pn || menuAs[i]==dv.otemp || As[i].className!="stadium_member")
continue;
var b=inner(menuAs[i],e);
if(b=="no")
continue;
//在上 边
if(b=="up")
{
menuAs[i].parentNode.insertBefore(dv.otemp,menuAs[i]);
}
else//在下 边
{
if(menuAs[i].nextSibling==null)
menuAs[i].parentNode.appendChild(dv.otemp);
else
menuAs[i].parentNode.insertBefore(dv.otemp,menuAs[i].nextSibling);
}
}
return false;
}//end createtemp
function inner(o,e)
{
var a=getxy(o);
//判断 是否在框里
//if(e.x>a.left && e.x< (a.left+a.width) && e.y>a.top && e.y< (a.top+a.height)) //判断是否在一个矩形里
//if(e.x>a.left && e.x< (a.left+a.width))//左右移动
if(e.y>a.top && e.y<(a.top+a.height))//上下 移动
{
if(e.y<(a.top+a.height/2))
return "up";
else
return "down";
}
else
{
return "no";
}
}
//一个 对象 位置和大小
function getxy(o)
{
var t=o.offsetTop; var l=o.offsetLeft; var w=o.offsetWidth; var h=o.offsetHeight;
while(o=o.offsetParent)
{
t+=o.offsetTop; l+=o.offsetLeft;
}
var j=
{
"width":w, "height":h, "top":t, "left":l
};//json 数据格式 技术支持在上方有URL自己找
return j;
}
//现在 做个东西容易么，要兼容各种浏览器。容易么~
//-->
</script>
05-28
279
279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
