哎！还是js的功夫太差。因为是边找资料边写的，很多地方印象不深，
时间一长，再重新写估计也难，所以把当时的思路记录一下！也希望大虾指点一下！
好了，转入正文，在开始之前先介绍几个功能函数！
1.格式化事件的函数
复制代码 代码如下:
function getevent(){
//同时兼容ie和ff的写法
if(document.all) return window.event;
func=getevent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0){
if((arg0.constructor==event || arg0.constructor ==mouseevent)
|| (typeof(arg0)==object && arg0.preventdefault && arg0.stoppropagation)){
return arg0;
}
}
func=func.caller;
}
return null;
}
2.取得鼠标的位置
复制代码 代码如下:
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
};
}
3.得到元素的位置
复制代码 代码如下:
function getposition(ele){
var left = 0;
var top = 0;
while (ele.offsetparent){
left += ele.offsetleft;
top += ele.offsettop;
ele = ele.offsetparent;
}
left += ele.offsetleft;
top += ele.offsettop;
return {x:left, y:top};
}
首先，当然是写好初始布局的页面， 查看初始页面效果
一般拖动的元素是跟随鼠标的，我的思路是在把拖动的元素增加到一个position为absolute的div中，
鼠标拖动的时候就让它的位置根据鼠标的坐标变化就可以了。所以在页面增加了个onload
复制代码 代码如下:
var tmpdiv=null;//临时存放拖动对象的div
window.onload=function(){
tmpdiv=document.createelement(div);
tmpdiv.style.csstext = 'position:absolute;display:none;border:1px dotted #ffcc66;';
document.body.appendchild(tmpdiv);
}
要实现拖动，首先触发的事件是mousedown,所以我在拖动的table的一个td上绑定了onmousedown=mousedown(this);
复制代码 代码如下:
var dragobject = null;//拖动的元素(table)
var mouseoffset = null;//鼠标的在拖动元素中的位置
var dragdiv=null;//拖动的table所在的列的div
var eledivw=null;//拖动的table的父节点(div)的高度
var dragdivlen=null;//拖动的table所在的列的div中用来放置table的div的个数
var dragcontainer=[col1,col2,col3];//用来实现列布局的div的id
//鼠标按下拖动的元素
function mousedown(elem){
ev=getevent();
dragobject = elem.parentnode.parentnode.parentnode;//被拖动的table
dragdiv=dragobject.parentnode.parentnode;
//拖动元素所在列里div的个数
dragdivlen=dragdiv.getelementsbytagname(div).length;
mouseoffset = getmouseoffset(dragobject, ev);
eledivw=dragobject.parentnode.offsetwidth;
dragobject.parentnode.style.border=1px dotted #ffcc66;
return false;
}
//得到鼠标在拖动元素中的位置
function getmouseoffset(target, ev){
var docpos = getposition(target);
var mousepos = mousecoords(ev);
return {x:mousepos.x - docpos.x, y:mousepos.y - docpos.y};
}
剩下的当然就是鼠标移动拖动对象也能移动，用到的当然就是mousemove咯，为简单我在document上绑定，
复制代码 代码如下:
document.onmousemove = mousemove;
function mousemove(){
ev=getevent();
var mousepos = mousecoords(ev);
if(dragobject){
dragobject.parentnode.style.display=none;//设置放置被拖动table的div隐藏
//把拖动的table放到临时的div中，并设置其坐标
for(var i=0; itmpdiv.appendchild(dragobject.clonenode(true));
tmpdiv.style.width=eledivw+px;
tmpdiv.style.backgroundcolor=#ffffff;
tmpdiv.style.display=block;
tmpdiv.style.top = (mousepos.y - mouseoffset.y)+px;
tmpdiv.style.left = (mousepos.x - mouseoffset.x)+px;
}
return false;
}
有了mousemove当然少不了mouseup
复制代码 代码如下:
document.onmouseup = mouseup;
//鼠标松开
function mouseup(){
if(dragobject){
if(dragobject.parentnode.style.display==none) dragobject.parentnode.style.display=block;
dragobject.parentnode.style.border=1px solid #ffcc66;
tmpdiv.style.display=none;
//这里是判断当列里有可拖动的元素时清除前面设置的高度值20px
for(var m=0;mvar coldiv=document.getelementbyid(dragcontainer[m]);
var coldivlen=coldiv.getelementsbytagname(div).length
var colsty=coldiv.getattribute(style);
if(coldivlen>0&&colsty!=null){
coldiv.removeattribute(style);
break;
}
}
dragobject=null;
}
}
看看是不是可以拖动了，当你松开鼠标左键时，拖动的元素将回到原来的位置 查看拖动页面效果
最后要做的就是让拖动元素不回到原来的位置，而是回到我们拖动的位置。
下面是mousemove事件的所有代码，看看注释就明白了
复制代码 代码如下:
function mousemove(){
ev=getevent();
var mousepos = mousecoords(ev);
if(dragobject){
//可拖动的个数为1,说明拖动后此列就没有拖动元素，为避免此列没有高度而不见，所以设置其高度为20px
if(dragdivlen==1) dragdiv.style.height=20px;
dragobject.parentnode.style.display=none;
//把拖动的元素加入到临时的tmpdiv中，并设置tmpdiv坐标
for(var i=0; itmpdiv.appendchild(dragobject.clonenode(true));
tmpdiv.style.width=eledivw+px;
tmpdiv.style.backgroundcolor=#ffffff;
tmpdiv.style.display=block;
tmpdiv.style.top = (mousepos.y - mouseoffset.y)+px;
tmpdiv.style.left = (mousepos.x - mouseoffset.x)+px;
//被拖动对象的中心点的坐标
var dragobjcntx=mousepos.x - mouseoffset.x+parseint(dragobject.offsetwidth)/2;
var dragobjcnty=mousepos.y - mouseoffset.y+parseint(dragobject.offsetheight)/2;
//判断tmpdiv所在的列
var dragconlen=dragcontainer.length;
for(var i=0;ivar curcontainer=document.getelementbyid(dragcontainer[i]);
var dcpos=getposition(curcontainer);
var dcposminx=dcpos.x;
var dcposminy=dcpos.y;
var dcwidth=curcontainer.offsetwidth;
var dcheight=curcontainer.offsetheight;
var dcposmaxx=dcposminx+dcwidth;
var dcposmaxy=dcposminy+dcheight;
if(dragobjcntx>dcposminx&&dragobjcntxdcposminy&&dragobjcntyvar activecontainer=curcontainer;
break;
}
}
}
//判断tmpdiv在此列哪个区块范围内
if(activecontainer){
var befornode=null;
var sdiv=activecontainer.getelementsbytagname(div)
var acchilen=sdiv.length;
for(j=acchilen-1;j>=0;j--){
var activediv=sdiv[j];
if(activediv){
var activedivpos=getposition(activediv);
var activedivminx=activedivpos.x;
var activedivminy=activedivpos.y;
var activedivmaxx=activedivminx+activediv.offsetwidth;
var activedivmaxy=activedivminy+activediv.offsetheight;
if(activedivmaxx>dragobjcntx&&activedivmaxy>dragobjcnty){
//if(dragobjcntx>activedivminx&&dragobjcntxactivedivminy&&dragobjcntybefornode=activediv;
}
}
}
//若此区块存在，就在此区块前插入拖动元素
if(befornode!=null){
if(dragobject.parentnode!=befornode){
curcontainer.insertbefore(dragobject.parentnode,befornode);
dragobject.parentnode.style.display=block;
//document.getelementbyid(test).value=curcontainer.id;
}
}
//不存在就在所在列插入拖动元素
else{
curcontainer.appendchild(dragobject.parentnode);
dragobject.parentnode.style.display=block;
}
}
return false;
}
好了，一个可以拖动布局的页面就完成了 查看最终页面效果
能力有限，有些地方可能说的不清不楚，若有兴趣，自己好好看看代码吧。
有什么不足的地方，请指教。
演示代码：
javascript 拖动 布局
1_1
1_2
2_1
2_2
2_3
3_1
3_2
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]