仿Google和Windows Live的拖拽自动交换位置表格框

by 清泉 3. 九月 2008 12:02

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
body
{
    margin:10px;
}
#dragHelper
{
    position:absolute;/*重要*/
    border:2px dashed #000000;
    background-color:#FFFFFF;
filter: alpha(opacity=30);
}
.normal
{
    position:absolute;/*重要*/
    width:300px;
    #height:10px;
    border:1px solid #666666;
    background-color:#FFFFFF;
}
.over
{
    position:absolute;/*重要*/
    width:300px;
    #height:10px;
    border:1px solid #666666;
    background-color:#f3f3f3;
filter: alpha(opacity=50);
}
.dragArea {
CURSOR: move;
}
</style>
</HEAD>
<BODY oncontextmenu="window.event.returnValue=false">
<input type="text" id="evt" name="eventValue" size="40" />
<div id="dragHelper" style="display:none"></div>
<div class="normal" overClass="over" dragClass="normal">
<table width="100%">
<tbody>
   <tr bgcolor="#CCCCCC" bar="yes"><td><a href="#">Cobao</a></td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
   <tr><td colspan="3">地址:http://www.cobao.cn</td></tr>
   <tr><td colspan="3">关键字:</td></tr>
   <tr><td colspan="3">说明:</td></tr>
</tbody>
</table>
</div>
<div class="normal" overClass="over" dragClass="normal">
<table width="100%">
<tbody>
   <tr bgcolor="#CCCCCC" bar="yes"><td>新浪</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
   <tr><td colspan="3">地址:http://www.sina.com.cn</td></tr>
   <tr><td colspan="3">关键字:</td></tr>
   <tr><td colspan="3">说明:</td></tr>
</tbody>
</table>
</div>
<div class="normal" overClass="over" dragClass="normal">
<table width="100%">
<tbody>
   <tr bgcolor="#CCCCCC" bar="yes"><td>网易</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
   <tr><td colspan="3">地址:http://www.163.com</td></tr>
   <tr><td colspan="3">关键字:</td></tr>
   <tr><td colspan="3">说明:</td></tr>
</tbody>
</table>
</div>
<div class="normal" overClass="over" dragClass="normal">
<table width="100%">
<tbody>
   <tr bgcolor="#CCCCCC" bar="yes"><td>QQ</td><td dragArea="yes" class="dragArea">........</td><td><a href="#" onclick="openClose(this)">-</a> x</td></tr>
   <tr><td colspan="3">地址:http://www.qq.com</td></tr>
   <tr><td colspan="3">关键字:</td></tr>
   <tr><td colspan="3">说明:</td></tr>
</tbody>
</table>
</div>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var dragObjs = [];      //可以拖拽的元素数组
var dragObjTops = [];
var dragHelper = document.getElementById("dragHelper");     //拖拽时位置框
var dragObj = null;      //拖拽对象元素
var dragObjPos = 0;
var dragObjOffset = {left:0,top:0}; //拖拽对象原始位置
var mouseInDragObjOffset = {x:0,y:0}; //鼠标在拖拽对象中的相对位置
var initHeight = 40;
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}
function getPosition(e){ //获取元素相对文档的绝对位置
var left = 0;
var top = 0;
while (e.offsetParent){
left += e.offsetLeft;
top += e.offsetTop;
e     = e.offsetParent;
}
left += e.offsetLeft;
top += e.offsetTop;
return {x:left, y:top};
}
function mouseCoords(ev){ //获取鼠标相对文档的绝对位置
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function getMouseOffset(target, ev){ // 获取鼠标相对元素的相对位置
ev = ev || window.event;
var elementPos    = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - elementPos.x, y:mousePos.y - elementPos.y};
}
function mouseDown(ev){
ev = ev || window.event;
target = ev.srcElement || ev.target;
if(dragObj){
return;
}