MozTW 討論區
https://forum.moztw.org/

寫了一個在Table中可拖拉欄位的Script,但在FF上跑仍有點怪怪的
https://forum.moztw.org/viewtopic.php?f=18&t=13018		 第 1 頁 (共 1 頁)
發表人:  t611209g [ 2006-02-26, 01:22 ]
文章主題 :  寫了一個在Table中可拖拉欄位的Script,但在FF上跑仍有點怪怪的
各位FF前輩,我弄了一個在Table中可拖拉欄位的功能,但FF上跑仍怪怪,要麻煩有經驗有時間的大大幫偶看一下哪裡有錯.謝謝您們.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>HTMLPage2</title>
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="ProgId" content="VisualStudio.HTML">
<meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
<style type="text/css"> .cssResizeDIV{cursor:pointer; }
</style>



<script>

var G_xHeadTR;
var G_blnStartDragColumnOrder = false;
var G_objDynamicDragDropDIV;
var G_aryobjOrderColumnInfo = new Array();
var G_intArrayHit = -1;
var G_intColumnCount = null;
var G_blnMustRefresh = false;
var G_strDynamicDragDropDIVColor="silver";
var G_strDIVOverHeaderTDColor = "lightblue";
var G_strBrowserVersion='';
var G_objColumnOrderTable;


//---初始化ArrayObjOrderColumnInfo
function InitArrayObjOrderColumnInfo(){
var intCx=0;
var intCy=0;
var intOffSetParent;
for (intI=0; intI<G_intColumnCount ; intI++) {
var objTD;
objTD = G_xHeadTR.cells[intI];
objTD.selectIndex = intI;
intOffSetParent = objTD.offsetParent;
if(intCx == 0 && intCy == 0 ){
while (intOffSetParent.offsetParent != null) {
intCy += intOffSetParent.offsetTop;
intCx += intOffSetParent.offsetLeft;
intOffSetParent = intOffSetParent.offsetParent;
}
}
G_aryobjOrderColumnInfo[intI][0] = intCx + objTD.offsetLeft;
G_aryobjOrderColumnInfo[intI][1] = intCy + objTD.offsetTop;
G_aryobjOrderColumnInfo[intI][2] = objTD;
G_aryobjOrderColumnInfo[intI][3] = intCx + objTD.offsetLeft + objTD.clientWidth;
}
}



//---改變Header TD Color
function ChangeHeaderTDColor(iChange){
for(var intI = 0; intI < G_aryobjOrderColumnInfo.length; intI++){
G_aryobjOrderColumnInfo[intI][2].style.backgroundColor ='';
}
if(iChange == "-1") return;
G_aryobjOrderColumnInfo[iChange][2].style.backgroundColor = G_strDIVOverHeaderTDColor;
}



//---取瀏覽器的版本
function GetBrowserVersion(){
var strUserAgent=navigator.userAgent;
var strUserPlatform=navigator.platform;
var strAppName=navigator.appName;
var intWhichplatform=strUserPlatform.indexOf("MacPPC");
if (intWhichplatform==-1){//瀏覽器是IBM PC
if (strAppName=='Netscape'){
return 'IBMFF' ;
}
else{
return 'IBMIE' ;
}
}
else{//瀏覽器是Mac PC
var intIsSafari=strUserAgent.indexOf("Safari");
if (intIsSafari != -1){
return 'MACSAFARI' ;
}
else{
if (strAppName=='Netscape'){
return 'MACFF' ;
}
else{
return 'MACIE' ;
}
}
}
}




function CheckHit(x,y,e){
intmidWObj = G_objDynamicDragDropDIV.style.posWidth / 2;
intmidHObj = 12;
for(var intI=0; intI < G_intColumnCount; intI++){
if( (y) > (G_aryobjOrderColumnInfo[intI][0]) && (y) < (G_aryobjOrderColumnInfo[intI][3] )){
ChangeHeaderTDColor(intI);//---改變Header TD Color
return intI + 1;
}
}
return -1;
}








//---把Form的內容與To內容交換---
function ChangeTDContent(intFrom, intTo){
if(intFrom == intTo) return;
var origfrom = intFrom;
var origto = intTo;
var intRange = 0;

//---更改Header Row---
if( intFrom > intTo ){
intRange = intFrom - intTo;
var strFromTDInnerHTML=G_xHeadTR.cells[intFrom].innerHTML;
var strFromTDWidth=G_xHeadTR.cells[intFrom].width;
var strFromTDAlign=G_xHeadTR.cells[intFrom].align;
for(var intI = 0 ; intI < intRange; intI++){
G_xHeadTR.cells[intFrom].innerHTML = G_xHeadTR.cells[intFrom - 1].innerHTML;
G_xHeadTR.cells[intFrom].width = G_xHeadTR.cells[intFrom - 1].width;
G_xHeadTR.cells[intFrom].align = G_xHeadTR.cells[intFrom - 1].align;
intFrom--;
}
G_xHeadTR.cells[intTo].innerHTML = strFromTDInnerHTML;
G_xHeadTR.cells[intTo].width = strFromTDWidth;
G_xHeadTR.cells[intTo].align = strFromTDAlign;
}
if( intFrom < intTo ){
intRange = intTo - intFrom;
var strFromTDInnerHTML=G_xHeadTR.cells[intFrom].innerHTML;
var strFromTDWidth=G_xHeadTR.cells[intFrom].width;
var strFromTDAlign=G_xHeadTR.cells[intFrom].align;
for(var intI = 0 ; intI < intRange; intI++){
G_xHeadTR.cells[intFrom].innerHTML = G_xHeadTR.cells[intFrom + 1].innerHTML;
G_xHeadTR.cells[intFrom].width = G_xHeadTR.cells[intFrom + 1].width;
G_xHeadTR.cells[intFrom].align = G_xHeadTR.cells[intFrom + 1].align;
intFrom++;
}
G_xHeadTR.cells[intTo].innerHTML = strFromTDInnerHTML;
G_xHeadTR.cells[intTo].width = strFromTDWidth;
G_xHeadTR.cells[intTo].align = strFromTDAlign;
}


for(var intI = 0 ; intI < G_xHeadTR.cells.length; intI++){
G_xHeadTR.cells[intI].selectIndex = intI;
}


//---初始化ArrayObjOrderColumnInfo
InitArrayObjOrderColumnInfo();


//---更改Header Row以外內容---
for ( var iRowInsert = 1 ; iRowInsert < G_objColumnOrderTable.rows.length; iRowInsert++ ){
intFrom = origfrom;
intTo = origto;
if( intFrom > intTo ){
intRange = intFrom - intTo;
var strFromTDInnerHTML= G_objColumnOrderTable.rows[iRowInsert].cells[intFrom].innerHTML;
var strFromTDAlign=G_objColumnOrderTable.rows[iRowInsert].cells[intFrom].align;
for(var intI = 0 ; intI < intRange; intI++){
G_objColumnOrderTable.rows[iRowInsert].cells[intFrom].innerHTML = G_objColumnOrderTable.rows[iRowInsert].cells[intFrom - 1].innerHTML;
G_objColumnOrderTable.rows[iRowInsert].cells[intFrom].align = G_objColumnOrderTable.rows[iRowInsert].cells[intFrom - 1].align;
intFrom--;
}
if (strFromTDInnerHTML != null)G_objColumnOrderTable.rows[iRowInsert].cells[intTo].innerHTML = strFromTDInnerHTML;
if (strFromTDInnerHTML != null)G_objColumnOrderTable.rows[iRowInsert].cells[intTo].align = strFromTDAlign;
}
if( intFrom < intTo ){
intRange = intTo - intFrom;
var strFromTDInnerHTML= G_objColumnOrderTable.rows[iRowInsert].cells[intFrom].innerHTML;
var strFromTDAlign=strFromTDAlign=G_objColumnOrderTable.rows[iRowInsert].cells[intFrom].align;
for(var intI = 0 ; intI < intRange; intI++){
G_objColumnOrderTable.rows[iRowInsert].cells[intFrom].innerHTML = G_objColumnOrderTable.rows[iRowInsert].cells[intFrom + 1].innerHTML;
G_objColumnOrderTable.rows[iRowInsert].cells[intFrom].align = G_objColumnOrderTable.rows[iRowInsert].cells[intFrom + 1].align;
intFrom++;
}
if (strFromTDInnerHTML != null)G_objColumnOrderTable.rows[iRowInsert].cells[intTo].innerHTML = strFromTDInnerHTML;
if (strFromTDInnerHTML != null)G_objColumnOrderTable.rows[iRowInsert].cells[intTo].align = strFromTDAlign;
}
}


var buf = "";
for(var intI=0; intI<G_xHeadTR.cells.length; intI++){
var td ;
td= G_xHeadTR.cells[intI];
tmp = td.innerHTML;
pos = tmp.indexOf("<");
if (pos > 0)
tmp = tmp.substring(0, pos);
else{
if (pos == 0)
tmp = td.innerText;
}
buf += tmp;
if (intI < G_xHeadTR.cells.length-1)buf += ",";
}
}





function InitColumnOrderTable(){

//---判斷瀏覽器版本
G_strBrowserVersion=GetBrowserVersion();
G_objColumnOrderTable=document.getElementById("dg");

G_xHeadTR = G_objColumnOrderTable.rows[0];
if (G_xHeadTR.tagName != "TR") return;


G_intColumnCount=G_objColumnOrderTable.rows[0].cells.length;
for(intI=0; intI < G_intColumnCount ; intI++){
G_aryobjOrderColumnInfo[intI] = new Array();
}


var cx=0;
var cy=0;
var c;
for (intI=0; intI<G_intColumnCount ; intI++) {
var objTD ;
objTD=G_objColumnOrderTable.rows[0].cells[intI];
objTD.selectIndex = intI;
c = objTD.offsetParent;
if (cx == 0 && cy == 0){
while (c.offsetParent != null) {
cy += c.offsetTop;
cx += c.offsetLeft;
c = c.offsetParent;
}
}
G_aryobjOrderColumnInfo[intI][0] = cx + objTD.offsetLeft;
G_aryobjOrderColumnInfo[intI][1] = cy + objTD.offsetTop;
G_aryobjOrderColumnInfo[intI][2] = objTD;
G_aryobjOrderColumnInfo[intI][3] = cx + objTD.offsetLeft + objTD.clientWidth;
//---開啟MouseDown監聽事件
if (G_strBrowserVersion=='IBMIE')objTD.attachEvent("onmousedown",onMouseDownSub);
if ((G_strBrowserVersion=='IBMFF')||(G_strBrowserVersion=='MACFF')){
objTD.addEventListener('mousedown', onMouseDownSub, false);
}
}
if (G_aryobjOrderColumnInfo[0][0] == G_aryobjOrderColumnInfo[0][3])G_blnMustRefresh = true;
}







function onMouseDownSub(e){

if( G_blnMustRefresh){
InitArrayObjOrderColumnInfo();//---初始化ArrayObjOrderColumnInfo
G_blnMustRefresh = false;
}

//---開啟MouseMove,MouseUp監聽事件
if (G_strBrowserVersion=='IBMIE'){
document.attachEvent("onmousemove",onMouseMoveSub);
document.attachEvent("onmouseup",onMouseUpSub);
}
if ((G_strBrowserVersion=='IBMFF')||(G_strBrowserVersion=='MACFF')){
document.addEventListener('mousemove', onMouseMoveSub, false);
document.addEventListener('mouseup', onMouseUpSub, false);
}

G_blnStartDragColumnOrder = true;
//D=A ? B : C 語法(A成立,D=B,否則D=C)

var src;
var c;
if (G_strBrowserVersion=='IBMIE'){
src = e.srcElement;
c = e.srcElement;
}
if ((G_strBrowserVersion=='IBMFF')||(G_strBrowserVersion=='MACFF')){
src = e.target;
c = e.target;
}
if(src.tagName != "TD")return;


// Create our header on the fly
G_objDynamicDragDropDIV = document.createElement("DIV");
G_objDynamicDragDropDIV.innerHTML = src.innerHTML;
G_objDynamicDragDropDIV.style.height = src.offsetParent.clientHeight;
G_objDynamicDragDropDIV.style.width = src.clientWidth;
G_objDynamicDragDropDIV.style.background = G_strDynamicDragDropDIVColor;
G_objDynamicDragDropDIV.style.position = "absolute";
G_objDynamicDragDropDIV.selectIndex= src.selectIndex;
G_objDynamicDragDropDIV.style.borderStyle = "dashed";
G_objDynamicDragDropDIV.style.borderWidth = "1px";
G_objDynamicDragDropDIV.style.display = "none";
while (c.offsetParent != null){
G_objDynamicDragDropDIV.style.y += c.offsetTop;
G_objDynamicDragDropDIV.style.x += c.offsetLeft;
c = c.offsetParent;
}

src.insertBefore(G_objDynamicDragDropDIV,null);
}







function onMouseMoveSub(e){

if(!G_blnStartDragColumnOrder || !G_objDynamicDragDropDIV) return;

var intmidWObj = parseInt(G_objDynamicDragDropDIV.style.width.replace('px','')) / 2;
var intmidHObj = 12;


// Save mouse's position in the document
var intMouseTop , intMouseLeft;
intMouseTop = e.clientY + document.body.scrollTop;
intMouseLeft = e.clientX + document.body.scrollLeft;

var cx=0,cy=0;
var elCurrent = G_objDynamicDragDropDIV.offsetParent;

if (elCurrent != null){
while (elCurrent.offsetParent != null) {
cx += elCurrent.offsetTop;
cy += elCurrent.offsetLeft;
elCurrent = elCurrent.offsetParent;
}
}

G_objDynamicDragDropDIV.style.top = intMouseTop - cx - intmidHObj;
G_objDynamicDragDropDIV.style.left = intMouseLeft - cy - intmidWObj;


if(G_objDynamicDragDropDIV.style.display == "none")G_objDynamicDragDropDIV.style.display = "";

G_intArrayHit = CheckHit(intMouseTop , intMouseLeft , e);

e.cancelBubble = false;
e.returnValue = false;
}





function onMouseUpSub(e){
if(!G_blnStartDragColumnOrder)return;
G_blnStartDragColumnOrder = false;

var intDragDropDIVSelectIndex = G_objDynamicDragDropDIV.selectIndex;

//清除OnMouseDown時動態所產生的DIV
if (G_strBrowserVersion=='IBMIE')G_objDynamicDragDropDIV.removeNode(true);
if ((G_strBrowserVersion=='IBMFF')||(G_strBrowserVersion=='MACFF'))G_objDynamicDragDropDIV.parentNode.removeChild(G_objDynamicDragDropDIV);
G_objDynamicDragDropDIV = null;


ChangeHeaderTDColor(-1);//---改變Header TD Color

if( (G_intArrayHit - 1) < 0 || intDragDropDIVSelectIndex < 0) return; // default faliure

// intDragDropDIVSelectIndex is the 0-based index of the column being moved
// (G_intArrayHit-1) is the 0-based index of the column being replaced
//---把Form的內容與To內容交換---
ChangeTDContent(intDragDropDIVSelectIndex, (G_intArrayHit - 1) );

// Reset our variables
G_intArrayHit = -1;

//---解除監聽事件
if (G_strBrowserVersion=='IBMIE'){
document.detachEvent("onmousemove",onMouseMoveSub);
document.detachEvent("onmouseup",onMouseUpSub);
}
if ((G_strBrowserVersion=='IBMFF')||(G_strBrowserVersion=='MACFF')){
document.removeEventListener('mousemove', onMouseMoveSub, false);
document.removeEventListener('mouseup', onMouseUpSub, false);
}

}




</script>
</head>
<body onload="InitColumnOrderTable();">
<center>
<table border="1" id="dg" width="700">
<tr>
<td id="xxx" width="150" class="cssResizeDIV" align="center">Column 1</td>
<td width="100" class="cssResizeDIV">Column 2</td>
<td width="200" class="cssResizeDIV" align="center">Column 3</td>
<td width="100" class="cssResizeDIV">Left 4</td>
<td width="250" class="cssResizeDIV" align="center">Column 5</td>
</tr>
<tr>
<td align="center">Center 1</td>
<td>Left 2</td>
<td align="center">Center 3</td>
<td><select ID="Select2" NAME="Select1">
<option selected value="3">Enroll</option>
<option value="10">Trans</option>
</select></td>
<td align="Right">Right 5</td>
</tr>
<tr>
<td align="center">Center 1</td>
<td>Left 2</td>
<td align="center">Center 3</td>
<td><select ID="Select1" NAME="Select1">
<option selected value="3">Enroll</option>
<option value="10">Trans</option>
</select></td>
<td align="Right">Right 5</td>
</tr>
<tr>
<td align="center">Center 1</td>
<td>Left 2</td>
<td align="center">Center 3</td>
<td><select ID="Select3" NAME="Select1">
<option selected value="3">Enroll</option>
<option value="10">Trans</option>
</select></td>
<td align="Right">Right 5</td>
</tr>
<tr>
<td align="center">Center 1</td>
<td>Left 2</td>
<td align="center">Center 3</td>
<td><select ID="Select4" NAME="Select1">
<option selected value="3">Enroll</option>
<option value="10">Trans</option>
</select></td>
<td align="Right">Right 5</td>
</tr>
<tr>
<td align="center">Center 1</td>
<td>Left 2</td>
<td align="center">Center 3</td>
<td><select ID="Select5" NAME="Select1">
<option selected value="3">Enroll</option>
<option value="10">Trans</option>
</select></td>
<td align="Right">Right 5</td>
</tr>
<tr>
<td align="center">Center 1</td>
<td>Left 2</td>
<td align="center">Center 3</td>
<td><select ID="Select6" NAME="Select1">
<option selected value="3">Enroll</option>
<option value="10">Trans</option>
</select></td>
<td align="Right">Right 5</td>
</tr>
</table>

</center>
</body>
</html>
發表人:  t611209g [ 2006-02-27, 15:14 ]
文章主題 : 
有沒有前輩可以幫幫我呢??? :(
發表人:  softcup [ 2006-02-27, 17:04 ]
文章主題 : 
加入下面箭頭那行試試看。
代碼:
      <title>HTMLPage2</title>
-->      <meta http-equiv="Content-Type" content="text/html; charset=Big5" />
      <meta name="vs_defaultClientScript" content="JavaScript">
發表人:  t611209g [ 2006-03-03, 19:33 ]
文章主題 : 
softcup 寫:
加入下面箭頭那行試試看。
代碼:
      <title>HTMLPage2</title>
-->      <meta http-equiv="Content-Type" content="text/html; charset=Big5" />
      <meta name="vs_defaultClientScript" content="JavaScript">


謝謝的大大的幫忙,但我這網站是美國人要用的,所以Big5不能用... :(
發表人:  softcup [ 2006-03-03, 22:20 ]
文章主題 : 
t611209g 寫:
softcup 寫:
加入下面箭頭那行試試看。
代碼:
      <title>HTMLPage2</title>
-->      <meta http-equiv="Content-Type" content="text/html; charset=Big5" />
      <meta name="vs_defaultClientScript" content="JavaScript">


謝謝的大大的幫忙,但我這網站是美國人要用的,所以Big5不能用... :(

將你程式中的中文註解都拿掉吧，編碼問題有時會導致 JavaScript 程式出現錯誤。
第 1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/