强悍的JS拖动动态布局

最新推荐文章于 2024-07-18 16:27:38 发布

beichen_

最新推荐文章于 2024-07-18 16:27:38 发布

阅读量755

点赞数

分类专栏： JavaScript 文章标签： function border table class object google

本文链接：https://blog.csdn.net/beichen_/article/details/3998134

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<html>

<head>

<style>

*{font-size:12px}

.dragTable{

font-size:12px;

border-top:1px solid #3366cc;

margin-bottom: 10px;

width:100%;

background-color:#FFFFFF;

height:100px;

}

.dragTR{

cursor:move;

color:#7787cc;

background-color:#e5eef9;

}

td{vertical-align:top;

border:2px solid red;

}

#parentTable{

border-collapse:collapse;

letter-spacing:25px;

}

</style>

//拓展FF下outerHTML

if(typeof(HTMLElement)!="undefined" && !window.opera)

{

HTMLElement.prototype.__defineGetter__("outerHTML",function()

{

var a=this.attributes, str="<"+this.tagName, i=0;for(;i<a.length;i++)

if(a[i].specified)

str+=" "+a[i].name+'="'+a[i].value+'"';

if(!this.canHaveChildren)

return str+" />";

return str+">"+this.innerHTML+"</"+this.tagName+">";

});

HTMLElement.prototype.__defineSetter__("outerHTML",function(s)

{

var r = this.ownerDocument.createRange();

r.setStartBefore(this);

var df = r.createContextualFragment(s);

this.parentNode.replaceChild(df, this);

return s;

});

HTMLElement.prototype.__defineGetter__("canHaveChildren",function()

{

});

}

var draged=false;

tdiv=null;

var lastX,lastY,lastLeft,lastTop;

function dragStart(event){

ao=event.srcElement||event.target;

if((ao.tagName=="TD")||(ao.tagName=="TR"))ao=ao.offsetParent;

else return;

draged=true;

tdiv=document.createElement("div");

tdiv.innerHTML=ao.outerHTML;//FF下用什么代替outerHTML

//tdiv.innerHTML="123";

tdiv.style.display="block";

tdiv.style.position="absolute";

tdiv.style.filter="alpha(opacity=70)";

tdiv.style.cursor="move";

tdiv.style.width=ao.offsetWidth;

tdiv.style.height=ao.offsetHeight;

tdiv.style.top=getInfo(ao).top;

tdiv.style.left=getInfo(ao).left;

document.body.appendChild(tdiv);

lastX=event.clientX;

lastY=event.clientY;

lastLeft=tdiv.style.left;

lastTop=tdiv.style.top;

if(isIE){

document.attachEvent("onmousemove",draging);

document.attachEvent("onmouseup",dragEnd);

}

else{

document.addEventListener("mousemove",draging,false);

document.addEventListener("mouseup",dragEnd,false);

}

function draging(event){//重要:判断MOUSE的位置

if(!draged)return;

var tX=event.clientX;

var tY=event.clientY;

tdiv.style.left=parseInt(lastLeft)+tX-lastX;

tdiv.style.top=parseInt(lastTop)+tY-lastY;

for(var i=0;i<$('parentTable').rows[0].cells.length;i++){

var parentCell=getInfo($('parentTable').rows[0].cells[i]);

if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){

var subTables=$('parentTable').rows[0].cells[i].getElementsByTagName("table");//获取单元格下所有的表格

if(subTables.length==0){//如果没有表格就放进去

if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){

$('parentTable').rows[0].cells[i].appendChild(ao);

}

break;//直接退出

}

for(var j=0;j<subTables.length;j++){

var subTable=getInfo(subTables[j]);

if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){

$('parentTable').rows[0].cells[i].insertBefore(ao,subTables[j]);//在它之前放入这个表格

break;

}else{

$('parentTable').rows[0].cells[i].appendChild(ao);//否则放在最后

}

//清除选中

window.getSelection && window.getSelection().removeAllRanges();//FF

document.onselectstart = function () { event.returnValue = false; }//IE

}

function dragEnd(){

if(!draged)return;

draged=false;

mm=ff(150,30);

}

function ff(aa,ab){//从GOOGLE网站来,用于恢复位置

var ac=parseInt(getInfo(tdiv).left);

var ad=parseInt(getInfo(tdiv).top);

var ae=(ac-getInfo(ao).left)/ab;

var af=(ad-getInfo(ao).top)/ab;

return setInterval(function(){if(ab<1){

clearInterval(mm);

//tdiv.removeNode(true);

//在FF下删除节点

document.body.removeChild(tdiv);//这里隐藏也行 tdiv.style.display='none';

ao=null;

return

}

ab--;

ac-=ae;

ad-=af;

tdiv.style.left=parseInt(ac)+"px";

tdiv.style.top=parseInt(ad)+"px"

}

,aa/ab)

}

function inint(){//初始化

for(var i=0;i<$('parentTable').rows[0].cells.length;i++){

var subTables=parentTable.rows[0].cells[i].getElementsByTagName("table");

for(var j=0;j<subTables.length;j++){

if(subTables[j].className!="dragTable")break;

subTables[j].rows[0].className="dragTR";

if (isIE) {

subTables[j].attachEvent("onmousedown",dragStart);

} else {

subTables[j].addEventListener("mousedown",dragStart,false);

}

//自定义

var $ = function (id){

return document.getElementById(new String(id));

};

var isIE = (document.all) ? true : false;

var getInfo = function (o){//取得坐标

var to=new Object();

to.left=to.right=to.top=to.bottom=0;

var twidth=o.offsetWidth;

var theight=o.offsetHeight;

while(o!=document.body){

to.left+=o.offsetLeft;

to.top+=o.offsetTop;

o=o.offsetParent;

}

to.right=to.left+twidth;

to.bottom=to.top+theight;

return to;

}

</script>

</head>

<tr>

</tr>

</table>

<tr>

<td>datagrid</td>

</tr>

</table>

<tr>

</tr>

</table>

</td>

<tr>

</tr>

</table>

</td>

<tr>

<td >javascrip<a href="#" onClick="document.all.td3.style.display='none'" onFocus="this.blur()" >关闭</a></td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

beichen_

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录