首頁 > 其他

一個剛完成的layout（拖動流暢，不受iframe影響）

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

寫一個layout本來是一個很簡單的事情，可這次的一個layout問題確讓我為難了許久才做出來，下面來大概講解一下問題的出現與解決過程。

註：本文代碼皆基於jquery實現。

按照普通的方法寫一個layout，一般是用一個table來實現，用中間的td拖動來控制左右兩個td的大小，這個問題簡單，很快就搞定。代碼如下：

QUOTE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<style type="text/css">
*{margin:0px;padding:0px}
html{overflow:hidden}
#sideBar{width:200px;height:100%;overflow:auto}
#toggleBar,.div{
width:7px;height:100%;
overflow:hidden;background:#eee;
cursor:e-resize;border-left:1px solid #ccc;border-right:1px solid #ccc;
}
td{display:block;overflow:auto;word-break:break-all;}
</style>
<script type="text/javascript" src="../Common/jquery.gif"></script>
<script type="text/javascript">
$(document).ready(function(){
//及時調整頁面內容的高度
setInterval(function(){
var winH=(document.documentElement||document.body).clientHeight;
$("#tbl,#sideBar,#toggleBar,#main").css("height",winH);
$("td").each(function(){$(this).html()||$(this).html(" ")});
},100)
}
);

var begin_x;
var drag_flag = false;
document.onmousemove = mouseDrag
document.onmouseup = mouseDragEnd
//半透明拖動條
var alphaDiv="<div class='div' id='alphaDiv' style='position:absolute;height:2000px;top:0;z-index:10001;filter:alpha(opacity=50);opacity:0.5;left:200px'> </div>";
function setDrag(){
drag_flag=true;
begin_x=event.x;
//添加半透明拖動條
$(alphaDiv).css("left",$("#toggleBar")[0].offsetLeft).appendTo("body");
}

//拖動時執行的函數
function mouseDrag(){
if(drag_flag==true){
if (window.event.button==1){
var now_x=event.x;
var value=parseInt($("#alphaDiv")[0].style.left)+now_x-begin_x;
$("#alphaDiv")[0].style.left=value+"px";
begin_x=now_x;
}
$("body").css("cursor","e-resize"); //設定游標類型
}else{
try{
$("#sideBar")[0].style.pixelWidth=$("#alphaDiv")[0].style.left;
$("#alphaDiv").remove();
}catch(e){}
}
}

function mouseDragEnd(){
//設定拖動條的位置
if(drag_flag==true){
//設定拖動條的位置（設定左側的寬度）
$("#sideBar")[0].style.pixelWidth=parseInt($("#alphaDiv")[0].style.left);
$("#alphaDiv").remove(); //刪除半透明拖動條
$("body").css("cursor","normal"); //恢複游標類型
}
drag_flag=false;
}
</script>
</head>
<body>
<table id="tbl" border="0" bordercollaspe="collapse" cellpadding="2" cellspacing="0" width="100%" height="100%">
<tr>
<td width="1"><div id="sideBar" style="width:200px;"><div style="height:1200px">asdfasdf</div></div>
</td>
<td width="1" onmousedown="setDrag()" id="toggleBar"></td>
<td id="main">
right Panel
</td>
</tr>
</table>
</body>
</html>
示範地址：http://www.ajaxbbs.net/test/layout/JqSplit/noiframe.htm上面的這種寫法也是大多數layout的寫法，著名架構dojo好像也是這麼實現的，其他的沒試。

但現在的情況仍然不能滿足我們的需求，我們需要左側或右側是ifame，通過iframe調用相關的頁面，在前面的代碼中將右側改為iframe。
示範地址：http://www.ajaxbbs.net/test/layout/JqSplit/iframeRight.htm

這時我們就發現問題了，只能向左邊拖動，但不能像右邊拖動，這是為什們呢？
經過檢查，發現原來當滑鼠移動到iframe上就無法捕獲滑鼠的位置了，event對象也不存在。得不到滑鼠的位置我們的拖動當然會出現問題了。

這個問題著實讓我鬱悶了許久，然後測試其他的一些layout（對iframe進行了處理）發現凡是使用iframe的都有一個缺陷，當滑鼠拖動速度很快的時候，拉動條速度跟不上（當然這些並沒有那個類比的半透明的拖動條，直接拖動真實的拖動條的），感覺就是很不流暢很不同步。
我們看一下直接拖動真是捲軸的情況
示範地址：http://www.ajaxbbs.net/test/layout/JqSplit/iframeRightNoAlpha.htm我們慢速度拖動還是可以向右移動的，但一但速度稍快便不能拖動了。

對於這個問題始終沒有想到好的解決辦法，就在我悲傷的即將放棄時，看到前幾天寫的一個類比彈出框，因為當時測試彈出框應該要遮住包括iframe在內的select。所以頁面中使用了ifame。突然發現一個索引很高的層能夠遮住iframe，突然間就有了靈感，馬上實驗。

思路如下：拖動拉條時在頁面添加一個索引很大的層（如10000），將其透明度設為0（完全透明），這樣滑鼠就不會移動到iframe中，但iframe仍然存在可以看到。當拖動結束（onmouseup）時去掉這個層即可，這樣就實現了比較完美的拖動。

示範地址：http://www.ajaxbbs.net/test/layout/JqSplit/demo.htm我們看一下完整的代碼：

QUOTE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<style type="text/css">
*{margin:0px;padding:0px}
html{overflow:hidden}
#sideBar{width:200px;height:100%;overflow:auto}
#toggleBar,.div{
width:7px;height:100%;
overflow:hidden;background:#eee;
cursor:e-resize;border-left:1px solid #ccc;border-right:1px solid #ccc;
}
td{display:block;overflow:auto;word-break:break-all;}
</style>
<script type="text/javascript" src="../Common/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//及時調整頁面內容的高度
setInterval(function(){
var winH=(document.documentElement||document.body).clientHeight;
$("#tbl,#sideBar,#toggleBar,#main").css("height",winH);
$("td").each(function(){$(this).html()||$(this).html(" ")});
},100)
}
);

var begin_x;
var drag_flag = false;
document.onmousemove = mouseDrag
document.onmouseup = mouseDragEnd
//半透明的拖動條（類比）
var alphaDiv="<div class='div' id='alphaDiv' style='position:absolute;height:2000px;top:0;z-index:10001;filter:alpha(opacity=50);opacity:0.5;left:200px'> </div>";
function setDrag(){
drag_flag=true;
begin_x=event.x;
//添加蒙板
createMask();
//添加半透明拖動條
$(alphaDiv).css("left",$("#toggleBar")[0].offsetLeft).appendTo("body");
}

//關鍵區段
function createMask(){
//建立背景
var rootEl=document.documentElement||document.body;
var docHeight=((rootEl.clientHeight>rootEl.scrollHeight)?rootEl.clientHeight:rootEl.scrollHeight)+"px";
var docWidth=((rootEl.clientWidth>rootEl.scrollWidth)?rootEl.clientWidth:rootEl.scrollWidth)+"px";
var shieldStyle="position:absolute;top:0px;left:0px;width:"+docWidth+";height:"+docHeight+";background:#000;z-index:10000;filter:alpha(opacity=0);opacity:0";
$("<div id='shield' style=\""+shieldStyle+"\"></div>").appendTo("body");
}
//拖動時執行的函數
function mouseDrag(){
if(drag_flag==true){
if (window.event.button==1){
var now_x=event.x;
var value=parseInt($("#alphaDiv")[0].style.left)+now_x-begin_x;
$("#alphaDiv")[0].style.left=value+"px";
begin_x=now_x;
}
$("body").css("cursor","e-resize"); //設定游標類型
}else{
try{
$("#shield").remove();
$("#sideBar")[0].style.pixelWidth=$("#alphaDiv")[0].style.left;
$("#alphaDiv").remove();
}catch(e){}
}
}

function mouseDragEnd(){
//設定拖動條的位置
if(drag_flag==true){
//設定拖動條的位置（設定左側的寬度）
$("#sideBar")[0].style.pixelWidth=parseInt($("#alphaDiv")[0].style.left);
$("#shield").remove(); //刪除蒙板
$("#alphaDiv").remove(); //刪除半透明拖動條
$("body").css("cursor","normal"); //恢複游標類型
}
drag_flag=false;
}
</script>
</head>
<body>
<table id="tbl" border="0" bordercollaspe="collapse" cellpadding="2" cellspacing="0" width="100%" height="100%">
<tr>
<td width="1"><div id="sideBar" style="width:200px;"><div style="height:1200px">asdfasdf</div></div>
</td>
<td width="1" onmousedown="setDrag()" id="toggleBar"></td>
<td id="main">
<iframe src="test.htm" id="frmMain" width="100%" height="100%"></iframe>
</td>
</tr>
</table>
</body>
</html>
自己的一點發現，一點心得，不知對大家有沒有用處，只管拿出來獻醜了！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More