用javascript做拖動(dòng)布局的思路
更新時(shí)間：2008年05月31日 00:01:47 作者：
這幾天不是很忙，就找了些拖動(dòng)布局方面的資料看看，也學(xué)著寫了個(gè)拖動(dòng)布局的效果，沒想到花了好多時(shí)間，
七拼八湊，總算是把這個(gè)效果寫出來了。哎！還是js的功夫太差。因?yàn)槭沁呎屹Y料邊寫的，很多地方印象不深，
時(shí)間一長，再重新寫估計(jì)也難，所以把當(dāng)時(shí)的思路記錄一下！也希望大蝦指點(diǎn)一下！
好了，轉(zhuǎn)入正文，在開始之前先介紹幾個(gè)功能函數(shù)！
1.格式化事件的函數(shù)
function getEvent(){
//同時(shí)兼容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.取得鼠標(biāo)的位置
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};
}
首先，當(dāng)然是寫好初始布局的頁面， 查看初始頁面效果
一般拖動(dòng)的元素是跟隨鼠標(biāo)的，我的思路是在把拖動(dòng)的元素增加到一個(gè)position為absolute的div中，
鼠標(biāo)拖動(dòng)的時(shí)候就讓它的位置根據(jù)鼠標(biāo)的坐標(biāo)變化就可以了。所以在頁面增加了個(gè)onload
var tmpDiv=null;//臨時(shí)存放拖動(dòng)對(duì)象的div
window.onload=function(){
tmpDiv=document.createElement("div");
tmpDiv.style.cssText = 'position:absolute;display:none;border:1px dotted #FFCC66;';
document.body.appendChild(tmpDiv);
}
要實(shí)現(xiàn)拖動(dòng)，首先觸發(fā)的事件是mouseDown,所以我在拖動(dòng)的table的一個(gè)td上綁定了onmousedown="mouseDown(this);"
程序代碼
var dragObject = null;//拖動(dòng)的元素(table)
var mouseOffset = null;//鼠標(biāo)的在拖動(dòng)元素中的位置
var dragDiv=null;//拖動(dòng)的table所在的列的div
var eleDivW=null;//拖動(dòng)的table的父節(jié)點(diǎn)(div)的高度
var dragDivLen=null;//拖動(dòng)的table所在的列的div中用來放置table的div的個(gè)數(shù)
var DragContainer=["col1","col2","col3"];//用來實(shí)現(xiàn)列布局的div的id
//鼠標(biāo)按下拖動(dòng)的元素
function mouseDown(elem){
ev=getEvent();
dragObject = elem.parentNode.parentNode.parentNode;//被拖動(dòng)的table
dragDiv=dragObject.parentNode.parentNode;
//拖動(dòng)元素所在列里div的個(gè)數(shù)
dragDivLen=dragDiv.getElementsByTagName("div").length;
mouseOffset = getMouseOffset(dragObject, ev);
eleDivW=dragObject.parentNode.offsetWidth;
dragObject.parentNode.style.border="1px dotted #FFCC66";
return false;
}
//得到鼠標(biāo)在拖動(dòng)元素中的位置
function getMouseOffset(target, ev){
var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
剩下的當(dāng)然就是鼠標(biāo)移動(dòng)拖動(dòng)對(duì)象也能移動(dòng)，用到的當(dāng)然就是mouseMove咯，為簡(jiǎn)單我在document上綁定，
document.onmousemove = mouseMove;
function mouseMove(){
ev=getEvent();
var mousePos = mouseCoords(ev);
if(dragObject){
dragObject.parentNode.style.display="none";//設(shè)置放置被拖動(dòng)table的div隱藏
//把拖動(dòng)的table放到臨時(shí)的div中，并設(shè)置其坐標(biāo)
for(var i=0; i<tmpDiv.childNodes.length; i++) tmpDiv.removeChild(tmpDiv.childNodes[i]);
tmpDiv.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當(dāng)然少不了mouseup
document.onmouseup = mouseUp;
//鼠標(biāo)松開
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";
//這里是判斷當(dāng)列里有可拖動(dòng)的元素時(shí)清除前面設(shè)置的高度值20px
for(var m=0;m<DragContainer.length;m++){
var 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;
}
}
看看是不是可以拖動(dòng)了，當(dāng)你松開鼠標(biāo)左鍵時(shí)，拖動(dòng)的元素將回到原來的位置 查看拖動(dòng)頁面效果
最后要做的就是讓拖動(dòng)元素不回到原來的位置，而是回到我們拖動(dòng)的位置。
下面是mousemove事件的所有代碼，看看注釋就明白了
function mouseMove(){
ev=getEvent();
var mousePos = mouseCoords(ev);
if(dragObject){
//可拖動(dòng)的個(gè)數(shù)為1,說明拖動(dòng)后此列就沒有拖動(dòng)元素，為避免此列沒有高度而不見，所以設(shè)置其高度為20px
if(dragDivLen==1) dragDiv.style.height="20px";
dragObject.parentNode.style.display="none";
//把拖動(dòng)的元素加入到臨時(shí)的tmpDiv中，并設(shè)置tmpDiv坐標(biāo)
for(var i=0; i<tmpDiv.childNodes.length; i++) tmpDiv.removeChild(tmpDiv.childNodes[i]);
tmpDiv.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";
//被拖動(dòng)對(duì)象的中心點(diǎn)的坐標(biāo)
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;i<dragConLen;i++){
var 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&&dragObjCntX<dcPosMaxX&&dragObjCntY>dcPosMinY&&dragObjCntY<dcPosMaxY){
var activeContainer=curContainer;
break;
}
}
}
//判斷tmpDiv在此列哪個(gè)區(qū)塊范圍內(nèi)
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&&dragObjCntX<activeDivMaxX&&dragObjCntY>activeDivMinY&&dragObjCntY<activeDivMaxY){
beforNode=activeDiv;
}
}
}
//若此區(qū)塊存在，就在此區(qū)塊前插入拖動(dòng)元素
if(beforNode!=null){
if(dragObject.parentNode!=beforNode){
curContainer.insertBefore(dragObject.parentNode,beforNode);
dragObject.parentNode.style.display="block";
//document.getElementById("test").value=curContainer.id;
}
}
//不存在就在所在列插入拖動(dòng)元素
else{
curContainer.appendChild(dragObject.parentNode);
dragObject.parentNode.style.display="block";
}
}
return false;
}
好了，一個(gè)可以拖動(dòng)布局的頁面就完成了 查看最終頁面效果
能力有限，有些地方可能說的不清不楚，若有興趣，自己好好看看代碼吧。
有什么不足的地方，請(qǐng)指教。
1.格式化事件的函數(shù)
復(fù)制代碼 代碼如下:
function getEvent(){
//同時(shí)兼容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.取得鼠標(biāo)的位置
復(fù)制代碼 代碼如下:
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.得到元素的位置
復(fù)制代碼 代碼如下:
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};
}
首先，當(dāng)然是寫好初始布局的頁面， 查看初始頁面效果
一般拖動(dòng)的元素是跟隨鼠標(biāo)的，我的思路是在把拖動(dòng)的元素增加到一個(gè)position為absolute的div中，
鼠標(biāo)拖動(dòng)的時(shí)候就讓它的位置根據(jù)鼠標(biāo)的坐標(biāo)變化就可以了。所以在頁面增加了個(gè)onload
復(fù)制代碼 代碼如下:
var tmpDiv=null;//臨時(shí)存放拖動(dòng)對(duì)象的div
window.onload=function(){
tmpDiv=document.createElement("div");
tmpDiv.style.cssText = 'position:absolute;display:none;border:1px dotted #FFCC66;';
document.body.appendChild(tmpDiv);
}
要實(shí)現(xiàn)拖動(dòng)，首先觸發(fā)的事件是mouseDown,所以我在拖動(dòng)的table的一個(gè)td上綁定了onmousedown="mouseDown(this);"
程序代碼
復(fù)制代碼 代碼如下:
var dragObject = null;//拖動(dòng)的元素(table)
var mouseOffset = null;//鼠標(biāo)的在拖動(dòng)元素中的位置
var dragDiv=null;//拖動(dòng)的table所在的列的div
var eleDivW=null;//拖動(dòng)的table的父節(jié)點(diǎn)(div)的高度
var dragDivLen=null;//拖動(dòng)的table所在的列的div中用來放置table的div的個(gè)數(shù)
var DragContainer=["col1","col2","col3"];//用來實(shí)現(xiàn)列布局的div的id
//鼠標(biāo)按下拖動(dòng)的元素
function mouseDown(elem){
ev=getEvent();
dragObject = elem.parentNode.parentNode.parentNode;//被拖動(dòng)的table
dragDiv=dragObject.parentNode.parentNode;
//拖動(dòng)元素所在列里div的個(gè)數(shù)
dragDivLen=dragDiv.getElementsByTagName("div").length;
mouseOffset = getMouseOffset(dragObject, ev);
eleDivW=dragObject.parentNode.offsetWidth;
dragObject.parentNode.style.border="1px dotted #FFCC66";
return false;
}
//得到鼠標(biāo)在拖動(dòng)元素中的位置
function getMouseOffset(target, ev){
var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
剩下的當(dāng)然就是鼠標(biāo)移動(dòng)拖動(dòng)對(duì)象也能移動(dòng)，用到的當(dāng)然就是mouseMove咯，為簡(jiǎn)單我在document上綁定，
復(fù)制代碼 代碼如下:
document.onmousemove = mouseMove;
function mouseMove(){
ev=getEvent();
var mousePos = mouseCoords(ev);
if(dragObject){
dragObject.parentNode.style.display="none";//設(shè)置放置被拖動(dòng)table的div隱藏
//把拖動(dòng)的table放到臨時(shí)的div中，并設(shè)置其坐標(biāo)
for(var i=0; i<tmpDiv.childNodes.length; i++) tmpDiv.removeChild(tmpDiv.childNodes[i]);
tmpDiv.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當(dāng)然少不了mouseup
復(fù)制代碼 代碼如下:
document.onmouseup = mouseUp;
//鼠標(biāo)松開
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";
//這里是判斷當(dāng)列里有可拖動(dòng)的元素時(shí)清除前面設(shè)置的高度值20px
for(var m=0;m<DragContainer.length;m++){
var 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;
}
}
看看是不是可以拖動(dòng)了，當(dāng)你松開鼠標(biāo)左鍵時(shí)，拖動(dòng)的元素將回到原來的位置 查看拖動(dòng)頁面效果
最后要做的就是讓拖動(dòng)元素不回到原來的位置，而是回到我們拖動(dòng)的位置。
下面是mousemove事件的所有代碼，看看注釋就明白了
復(fù)制代碼 代碼如下:
function mouseMove(){
ev=getEvent();
var mousePos = mouseCoords(ev);
if(dragObject){
//可拖動(dòng)的個(gè)數(shù)為1,說明拖動(dòng)后此列就沒有拖動(dòng)元素，為避免此列沒有高度而不見，所以設(shè)置其高度為20px
if(dragDivLen==1) dragDiv.style.height="20px";
dragObject.parentNode.style.display="none";
//把拖動(dòng)的元素加入到臨時(shí)的tmpDiv中，并設(shè)置tmpDiv坐標(biāo)
for(var i=0; i<tmpDiv.childNodes.length; i++) tmpDiv.removeChild(tmpDiv.childNodes[i]);
tmpDiv.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";
//被拖動(dòng)對(duì)象的中心點(diǎn)的坐標(biāo)
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;i<dragConLen;i++){
var 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&&dragObjCntX<dcPosMaxX&&dragObjCntY>dcPosMinY&&dragObjCntY<dcPosMaxY){
var activeContainer=curContainer;
break;
}
}
}
//判斷tmpDiv在此列哪個(gè)區(qū)塊范圍內(nèi)
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&&dragObjCntX<activeDivMaxX&&dragObjCntY>activeDivMinY&&dragObjCntY<activeDivMaxY){
beforNode=activeDiv;
}
}
}
//若此區(qū)塊存在，就在此區(qū)塊前插入拖動(dòng)元素
if(beforNode!=null){
if(dragObject.parentNode!=beforNode){
curContainer.insertBefore(dragObject.parentNode,beforNode);
dragObject.parentNode.style.display="block";
//document.getElementById("test").value=curContainer.id;
}
}
//不存在就在所在列插入拖動(dòng)元素
else{
curContainer.appendChild(dragObject.parentNode);
dragObject.parentNode.style.display="block";
}
}
return false;
}
好了，一個(gè)可以拖動(dòng)布局的頁面就完成了 查看最終頁面效果
能力有限，有些地方可能說的不清不楚，若有興趣，自己好好看看代碼吧。
有什么不足的地方，請(qǐng)指教。
相關(guān)文章
JavaScript閉包和作用域鏈的定義實(shí)現(xiàn)
這篇文章主要為大家介紹了JavaScript閉包和作用域鏈的定義與實(shí)現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
JSON表單是一個(gè)基于React的抽象組件，它可以把JSON數(shù)據(jù)格式描述的表單轉(zhuǎn)換成項(xiàng)目中的表單，這篇文章主要介紹了JSON生成Form表單的方法示例,感興趣的小伙伴們可以參考一下2018-11-11
JavaScript中new操作符的原理與實(shí)現(xiàn)詳解
你知道new嗎？你知道new的實(shí)現(xiàn)原理嗎？你能手寫new方法嗎？不要擔(dān)心，這篇文件就來帶大家深入了解一下JavaScript中的new操作符，感興趣的小伙伴可以學(xué)習(xí)一下2022-10-10
基于HTML模板和JSON數(shù)據(jù)的JavaScript交互(移動(dòng)端)
這篇文章主要介紹了基于HTML模板和JSON數(shù)據(jù)的JavaScript交互(移動(dòng)端)的相關(guān)資料,需要的朋友可以參考下2016-04-04
js氣泡效果，在項(xiàng)目需求中經(jīng)常遇到。今天小編把大概實(shí)現(xiàn)步驟分享到腳本之家平臺(tái)，感興趣的朋友可以參考下2016-05-05
本文給大家記錄的是一次谷歌Chrome瀏覽器擴(kuò)展程序的開發(fā)過程，非常的細(xì)致，有類似開發(fā)念頭的小伙伴們可以來參考下2016-01-01
pjblog中的UBBCode.js...2007-04-04
本文給大家匯總分享了幾種使用javascript實(shí)現(xiàn)判斷圖片路徑是否存在的代碼，都是平時(shí)項(xiàng)目中用到過的，這里總結(jié)一下，有需要的小伙伴可以參考下。2015-04-04
js實(shí)現(xiàn)消滅星星(web簡(jiǎn)易版)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)web簡(jiǎn)易版的消滅星星，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
javascript實(shí)現(xiàn)平滑無縫滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)平滑無縫滾動(dòng)的具體代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05