<html>
<table border=1>
<th>
<tr style="background-color:blue;display:block;cursor:pointer">
<td οnmοusedοwn="fun(this)">t1</td>
<td οnmοusedοwn="fun(this)">t2</td>
<td οnmοusedοwn="fun(this)">t3</td>
</tr>
</th>
<tbody>
<tr><td>b1</td><td>b2</td><td>b3</td></tr>
<tr><td>b1</td><td>b2</td><td>b3</td></tr>
<tr><td>b1</td><td>b2</td><td>b3</td></tr>
<tr><td>b1</td><td>b2</td><td>b3</td></tr>
<tr><td>b1</td><td>b2</td><td>b3</td></tr>
</tbody>
</table>
<html>
<script type="text/javascript">
/** ie7下完成!
* 思路: 将table内的2列互换数据,
1.当 鼠标 按下未松开的时候,根据 一个cell 获取 row ,然后获取到 table对象{
2.生成一个临时div,储存将要呼唤数据列的标题!
3.当 鼠标 按下为放松并且开始移动的时候{
1.获取准备要换数据的列!event.srcElement,并移动div!
当鼠标松开时{
1.判断鼠标方式那一刻的坐标是否到达要换数据列的中心偏后处!如果是则交互2列的数据!
否:无操作
}
}
}
*/
//获取对象距离浏览器左侧(去除边界)的宽度
function getAbsolutePosition(obj){
var pos=obj.clientLeft+obj.offsetLeft;
while(obj=obj.offsetParent){
pos+=obj.clientLeft+obj.offsetLeft;
}
pos-=document.body.clientLeft;
return pos;
}
//获取对象的宽度
function getWidth(obj){
return obj.clientWidth;
}
//交互2列的数据
function exchange(table,exIndex,curIndex){
var len=table.rows.length;
for(var j=0;j<len;j++){
var row=table.rows[j];
if(row.cells.length>1){
var tmp=row.cells[exIndex].innerHTML;
row.cells[exIndex].innerHTML=row.cells[curIndex].innerHTML;
row.cells[curIndex].innerHTML=tmp;
}
}
}
//核心
function fun(cell){
var row=cell.parentElement;
var table=row.parentElement;
while(table.tagName!="table".toUpperCase()){
table=table.parentElement;
}
var body=document.body;
//不可选择
cell.onselectstart=function(){return false;};
var x=event.clientX;
var y=event.clientY;
var width=cell.clientWidth;
var height=cell.clientHeight;
var layer=createLayer(x,y,width,height,cell.innerHTML);
body.appendChild(layer);
layer.style.display="";
row.οnmοusemοve=function(){
if(event.button==1){
layer.style.left=event.clientX;
layer.style.top=event.clientY;
var curCell=event.srcElement;
var width=getWidth(curCell);// cell宽度
var pos=getAbsolutePosition(curCell);//获取绝对左侧坐标
var x=event.clientX;
row.οnmοuseup=function(){
if(x>=(width/2)+pos){ //在当前cell的中点之后处,
var curIndex=curCell.cellIndex;
var exIndex=cell.cellIndex;
exchange(table,exIndex,curIndex);
}
}
}
}
//清场
body.οnmοuseup=function(){
if(body.contains(layer)){
//清空
body.removeChild(layer);
}
}
}
//制造层
function createLayer(x,y,width,height,content){
var layer=document.createElement("div");
layer.style.zIndex=2;
layer.style.position="absolute";
layer.style.display="none";
layer.style.backgroundColor="red";
layer.style.left=x;
layer.style.top=y;
layer.style.width=width;
layer.style.height=height;
layer.innerHTML=content;
return layer;
}
</script>
1850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
