国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置： 首頁 - 科技 - 知識百科 - 正文

用javascript做拖動布局的思路_javascript技巧

來源：懂視網 責編：小采 時間：2020-11-27 20:55:32
文檔

用javascript做拖動布局的思路_javascript技巧

用javascript做拖動布局的思路_javascript技巧:哎！還是js的功夫太差。因為是邊找資料邊寫的，很多地方印象不深， 時間一長，再重新寫估計也難，所以把當時的思路記錄一下！也希望大蝦指點一下！ 好了，轉入正文，在開始之前先介紹幾個功能函數！ 1.格式化事件的函數 代碼如下: function getEven
推薦度：
導讀用javascript做拖動布局的思路_javascript技巧:哎！還是js的功夫太差。因為是邊找資料邊寫的，很多地方印象不深， 時間一長，再重新寫估計也難，所以把當時的思路記錄一下！也希望大蝦指點一下！ 好了，轉入正文，在開始之前先介紹幾個功能函數！ 1.格式化事件的函數 代碼如下: function getEven

哎！還是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;
}


好了，一個可以拖動布局的頁面就完成了 查看最終頁面效果
能力有限，有些地方可能說的不清不楚，若有興趣，自己好好看看代碼吧。
有什么不足的地方，請指教。
演示代碼：

[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

用javascript做拖動布局的思路_javascript技巧

用javascript做拖動布局的思路_javascript技巧:哎！還是js的功夫太差。因為是邊找資料邊寫的，很多地方印象不深， 時間一長，再重新寫估計也難，所以把當時的思路記錄一下！也希望大蝦指點一下！ 好了，轉入正文，在開始之前先介紹幾個功能函數！ 1.格式化事件的函數 代碼如下: function getEven
推薦度：
標簽： 技巧 js javascript
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板： 日韩在线第三页 | 亚洲三级电影在线观看 | 国产一区亚洲欧美成人 | 伊人精品成人久久综合欧美 | 青青伊人91久久福利精品 | 国产不卡在线看 | 在线观看日韩欧美 | 国产一区二区福利久久 | 欧美在线视频网站 | 视频亚洲一区 | 一区在线播放 | 国产图区 | 欧美国产精品 | 日韩啪 | 亚洲乱码一二三四区麻豆 | 欧美.亚洲.日本一区二区三区 | 亚洲一区二区三区久久久久 | 国产精品久久久久久一级毛片 | 在线观看日韩欧美 | 日本成本人观看免费fc2 | 精品国产欧美一区二区三区成人 | 国产精品合集一区二区三区 | 亚洲欧洲免费视频 | 国产精品一区在线播放 | 五月天丁香网 | 亚洲精品视频免费在线观看 | 亚洲日本韩国欧美 | 国产一二三区视频 | 国产综合亚洲欧美日韩一区二区 | 熟年交尾五十路视频在线播放 | 国产精自产拍久久久久久 | 国产伦精品一区二区三区网站 | a一区二区三区视频 | 国产精品高清一区二区三区不卡 | 午夜国产大片免费观看 | 久久性色| h片免费在线观看 | 国产精品久久久久影院色 | 国产精品va一区二区三区 | 久久精品韩国日本国产 | 国产三级一区 |