javascript js 拖动效果 兼 ie 6,7,8 firefox Chrome（原创，想要尽管拿去用。技术支持：QQ3084532）
2009-06-11 22:08
477 查看
转自：/article/6416744.html
<!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.onload=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.onmousedown=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.onmouseup=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.onmouseup=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>
<!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.onload=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.onmousedown=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.onmouseup=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.onmouseup=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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript js 拖动效果 兼 ie 6,7,8 firefox Chrome（原创，想要尽管拿去用。技术支持：QQ3084532）
- javascript js 拖动效果 兼 ie 6,7,8 firefox Chrome
- CSS Hack技术详解，支持IE 6-11、Chrome、FireFox、Safari、Opera
- CSS Hack技术详解，支持IE 6-11、Chrome、FireFox、Safari、Opera 6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、FireFox、Safari、Opera
- javascript实现拖动层效果代码(符合标准且兼容IE,chrome,firefox)
- 仿google拖动，使用DIV技术。支持IE和firefox
- CSS Hack技术详解，支持IE 6-11、Chrome、FireFox、Safari、Opera
- CSS Hack技术详解，支持IE 6-11、Chrome、FireFox、Safari、Opera 6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、Fi...
- javascript实现拖动层效果代码(符合标准且兼容IE,chrome,firefox)
- IE,Firefox,Chrome都可用的阴影效果
- 基于raphael 的图形变化（支持firefox，chrome，IE， opera）
- 让网站变灰的CSS代码（支持IE、firefox和chrome）
- jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox
- [原创]实现与服务器时间同步的跨平台JS脚本 支持IE , firefox , Opera ,Netscape 等主流浏览器
- 该效果在firefox和IE中测试通过.拖动然后就布局自动保存到数据库里了.
- jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
- [完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器
- jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、Chrome、Opera
- 用DIV完美模拟createPopup 弹出窗口，支持Firefox,ie,chrome
- 利用jQuery srollTop()函数实现类似锚点的定位效果-兼容chrome,firefox,IE,safari