日期:2014-05-16  浏览次数:20399 次

請各位高手大大們看看下面的需求如何實現.-
需要達到的功能是:
1.大項可以移動,大項分別是:
壹、災情簡要   ,   貳、災情基本資料   ,參、應變情形   ,肆、撤離情形
可以將   大項   "貳、災情基本資料 "   和   大項 "壹、災情簡要 "   進行互換   ,頁面的位置.
並且   如果大項   "壹、災情簡要 "   排在了   大項 "貳、災情基本資料 "   下面了   ,那麼就必需將大項名字前的序號進行替換,
替換後的結果為   大項 "壹、災情基本資料 "   , "貳、災情簡要 "
2.可以移除大項,   如果某個大項被移除那麼後面的大項的序號要隨之變化.
如大項   "參、應變情形 "   被移除,那麼   後面的大項   "肆、撤離情形 "   變成了   "參、撤離情形 "
3.移除的大項可以恢復,   如果大項   "參、應變情形 "   被移除   後面的大項   "肆、撤離情形 "   變成了   "參、撤離情形 ",但點選恢復後
則排列的順序就又變成了   "參、應變情形 "   , "肆、撤離情形   "

請各位大大幫幫小弟,看看如何處理這個需求,另外   大項不止上面的四個,是動態的   可能就一個也可能是几十個,
每次設置完成後都會保存狀態,以便下次進入畫面後顯示的是已經設置後的值,畫面大約就長這個樣子,當然各位大大可以
進行畫面佈局的增加修改以便達到功能

以下是html   code
<!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=big5 "   />
<title> 無標題文件 </title>
</head>

<body>

<div   id= "head "   TSTyle= "width:90%;margin:auto ">
<p   align= "center ">
<font   face= "標楷體 "   size= "6 "   color= "#006666 "> 報告資料(各單位) </font> </p>
</div>
<p> </p>
<div   id= "centerArea "   TSTyle= "width:90%;margin:auto "> </div>

<div   id= "content "   TSTyle= "width:90%;margin:auto ">
<table   width= "81% "   border= "1 ">
    <tr>
        <td   colspan= "3 "   bgcolor= "#CCCCCC ">
<font   size= "4 "> <TSTrong> 壹、災情簡要 </TSTrong> </font> </td>
      </tr>
    <tr>
        <td   colspan= "3 ">
                <textarea   name= "textarea2 "   id= "textarea2 "   rows= "5 "   cols= "107 "   readonly   TSTyle= "background-color:   #FFFFCC;   border-TSTyle:   solid;   border-width:   0;   font-size:   16px "> </textarea> </td>
    </tr>
    <tr>
        <td   colspan= "3 "   bgcolor= "#CCCCCC ">
<font   size= "4 "> <TSTrong> 貳、災情基本資料 </TSTrong> </font> </td>
    </tr>
    <tr>
        <td   width= "31% "   bgcolor= "#E7FFCE "> 雨量 </td>
        <td   width= "38% "> 氣象局 </td>
        <td   width= "31% "   align= "right "   bgcolor= "#E7FFCE ">
    <input   type=