台灣最大程式設計社群網站
線上人數
697
 
會員總數:245215
討論主題:189089
歡迎您免費加入會員
討論區列表 >> 專欄文章 >> 跨Frame與Window拖拉放實作 並可 進行多重選取
[]  
[我要回覆]
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
跨Frame與Window拖拉放實作 並可 進行多重選取
價值 : 0 QP  點閱數:671 回應數:0

樓主

AB
門外漢
0 3
32 5
發送站內信

此僅為當初寫來測試用 如果要套用 可能必須修改

主頁面 main.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">

<SCRIPT src="Drag_Drop_Var.js" type=text/javascript></SCRIPT>
<title>無標題文件</title>
</head>
<frameset cols="80,*" frameborder="YES" border="10" framespacing="0">
<frame src="main_left.htm" name="leftFrame" scrolling="NO" noresize>
<frame id="mainRight" src="main_right.htm" name="rightFrame">
</frameset>
<noframes><body>

</body></noframes>
</html>


左側框架頁main_left.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<SCRIPT src="Drop.js" type=text/javascript></SCRIPT>
<title>無標題文件</title>
</head>

<body marginwidth="10">
<img id="testimg" ondragenter='cancelevent();' ondragover='cancelevent();' ondrop='fnGetDestination();' src="../../../../test.gif" width="60" height="60">
</body>
</html>


右側框架頁main_right.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<script>
var isSelect = new Array();
var idSequence = new Array();
<!---- 網頁起始相關函數 ---->
function fnInit()
{
for(i=0; i<document.all.length; i++)
{
document.all(i).unselectable = "on";
}
first.unselectable = "off";
second.unselectable = "off";
third.unselectable = "off";
fnSetIdSequence();
}

<!---- 使用者Input事件判斷函數 ---->

//滑鼠事件檢查函數
function fnClick(srcID)
{
//檢查陣列值有無內容
if(isSelect.length > 0)
{
if(event.ctrlKey)
{
//檢查來源物件是否已被選取
if(fnCheckisSelect(srcID))
{
//取消選取狀態
top.mainRight.document.getElementById(srcID).bgColor='#FFFFFF';
fnSelectState(srcID);
}
else
{
//增加選取
top.mainRight.document.getElementById(srcID).bgColor='#FFFFCC';
fnSelectState(srcID);
}
}
else if(event.shiftKey)
{
//先移除所有選取狀態
for (var i = 0; i < isSelect.length; i++)
{
top.mainRight.document.getElementById(isSelect[i]).bgColor='#FFFFFF';
}
//抓取陣列中最後的物件
lastValue = isSelect.pop();
//清空陣列內容
isSelect = new Array();
//判斷來源物件是否為isSelect陣列內最後物件
if(lastValue == srcID)
{
//變更為選取
fnSelectState(srcID);
//將目標設為onFocus
top.mainRight.document.getElementById(srcID).bgColor='#FFFFCC';
}
else
{
//判斷選取的起始到終止位置
if(parseInt(fnCheckPosition(lastValue)) > parseInt(fnCheckPosition(srcID)))
{
for(var i = parseInt(fnCheckPosition(lastValue)); i >= parseInt(fnCheckPosition(srcID)); i --)
{
//變更為選取
fnSelectState(idSequence[i]);
//將目標設為onFocus
top.mainRight.document.getElementById(idSequence[i]).bgColor='#FFFFCC';
}
}
else
{
for(var i = parseInt(fnCheckPosition(lastValue)); i <= parseInt(fnCheckPosition(srcID)); i ++)
{
//變更為選取
fnSelectState(idSequence[i]);
//將目標設為onFocus
top.mainRight.document.getElementById(idSequence[i]).bgColor='#FFFFCC';
}
}
}
}
else
{
for (var i = 0; i < isSelect.length; i++)
{
top.mainRight.document.getElementById(isSelect[i]).bgColor='#FFFFFF';
}
//清空陣列內容
isSelect = new Array();
//變更為選取
fnSelectState(srcID);
//將目標設為onFocus
top.mainRight.document.getElementById(srcID).bgColor='#FFFFCC';
}
}
//無內容則新增
else
{
//變更為選取
fnSelectState(srcID);
//將目標設為onFocus
top.mainRight.document.getElementById(srcID).bgColor='#FFFFCC';
}
}
<!---- 事件處理函數 ---->
//處理onFocus事件
function fnShowonFocus(srcID)
{
//檢查Select
if(fnSelectState(srcID))
{
top.mainRight.document.getElementById(srcID).bgColor='#FFFFCC';
}
else
{
top.mainRight.document.getElementById(srcID).bgColor='#FFFFFF';
}
}
//處理MouseOver事件
function fnMouseOver(srcID)
{
//檢查Select
if(fnCheckisSelect(srcID))
{
return;
}
else
{
top.mainRight.document.getElementById(srcID).bgColor='#99CC33';
}
}

//處理MouseOut事件
function fnMouseOut(srcID)
{
//檢查Select
if(fnCheckisSelect(srcID))
{
return;
}
else
{
top.mainRight.document.getElementById(srcID).bgColor='#FFFFFF';
}
}
<!---- idSequence陣列系列函數 ---->
//建立陣列
function fnSetIdSequence()
{
var pos = 0;
var lastPos = 0;
//var tmpString = top.mainRight.document.getElementById('idSeq').value;
while(pos != -1)
{
pos = top.mainRight.document.getElementById('idSeq').value.indexOf(',', lastPos);
if(pos != -1)
{
idSequence.push(top.mainRight.document.getElementById('idSeq').value.substring(lastPos, pos));
lastPos = pos + 1;
}
}
}

//檢查位置
function fnCheckPosition(srcID)
{
for (var i = 0; i <= idSequence.length; i++)
{
//如果有相同則傳會索引位置
if(idSequence[i] == srcID)
{
return i;
}
}
}
<!---- isSelect陣列系列函數 ---->
//檢查isSelect陣列
function fnCheckisSelect(srcID)
{
for (var i = 0; i <= isSelect.length; i++)
{
//如果有相同則傳回true
if(isSelect[i] == srcID)
{
return true;
}
}
//沒有相同則傳回false
return false;
}
//設定isSelect陣列內容值(Ver 1)
function fnSelectState(srcID)
{
for (var i = 0; i <= isSelect.length; i++)
{
//如果有相同則取消核選
if(isSelect[i] == srcID)
{
//取消選取狀態
isSelect.splice(i,1);
//代表取消核選
return false;
}
}
//如果沒有相同則新增
isSelect.push(srcID);
//代表增加核選
return true;
}
</script>
<SCRIPT src="Drag.js" type=text/javascript></SCRIPT>
<link rel="stylesheet" href="main_css.css" type="text/css">
<title>無標題文件</title>
</head>
<body onload="fnInit();">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" frame="void" rules="rows" >
<tr id="first" name="1" onMouseOver="fnMouseOver(this.id)" onMouseOut="fnMouseOut(this.id)" onMouseMove="document.all.first.dragDrop();" ondragstart="fnGetSource()" onClick="fnClick(this.id)" height="18" class="letter-black">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr id="second" name="2" onMouseOver="fnMouseOver(this.id)" onMouseOut="fnMouseOut(this.id)" onMouseMove="document.all.second.dragDrop();" ondragstart="fnGetSource()" onClick="fnClick(this.id)" height="18" class="letter-black">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr id="third" name="3" onMouseOver="fnMouseOver(this.id)" onMouseOut="fnMouseOut(this.id)" onMouseMove="document.all.third.dragDrop();" ondragstart="fnGetSource()" onClick="fnClick(this.id)" height="18" class="letter-black">
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr id="forth" name="4" onMouseOver="fnMouseOver(this.id)" onMouseOut="fnMouseOut(this.id)" onMouseMove="document.all.first.dragDrop();" ondragstart="fnGetSource()" onClick="fnClick(this.id)" height="18" class="letter-black">
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr id="fifth" name="5" onMouseOver="fnMouseOver(this.id)" onMouseOut="fnMouseOut(this.id)" onMouseMove="document.all.second.dragDrop();" ondragstart="fnGetSource()" onClick="fnClick(this.id)" height="18" class="letter-black">
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr id="sixth" name="6" onMouseOver="fnMouseOver(this.id)" onMouseOut="fnMouseOut(this.id)" onMouseMove="document.all.third.dragDrop();" ondragstart="fnGetSource()" onClick="fnClick(this.id)" height="18" class="letter-black">
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
</table>
<input type="hidden" id="idSeq" value="first,second,third,forth,fifth,sixth,">
<p>  </p>
</body>
</html>


相關JavaScript檔
Drag_Drop_Var.js

var srcElementId; //Id of dragged object
var destElementId; //Id of valid drop target object

Drag.js

//This function sets Id of dragged image to variable stored in container .
function fnGetSource()
{ parent.srcElementId = isSelect;
}
//This function is used for handling cancel event
function cancelevent()
{
window.event.returnValue = false;
}

Drop.js

//This function is used to get valid target drop object,
//and alert the srcElement's ID
function fnGetDestination()
{
parent.destElementId = event.srcElement.id;
alert(parent.srcElementId + " " + parent.destElementId);
}
//This function is used for handling cancel event
function cancelevent()
{
window.event.returnValue = false;
}

本篇文章發表於2007-03-20 15:49
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
目前尚無任何回覆
   

回覆
如要回應,請先登入.