快捷導(dǎo)航

DIV任意拖動的問題

更新時間：2006年07月21日 00:00:00 作者：

<P><html><head><title>DRAG the DIV</title><style>*{font-size:12px}.dragTable{ font-size:12px; border-top:1px solid #3366cc; margin-bottom: 10px; width:100%; background-color:#FFFFFF;}.dragTR{ cursor:move; color:#7787cc; background-color:#e5eef9;}td{vertical-align:top;}#parentTable{ border-collapse:collapse; letter-spacing:25px;}</style></head><body><table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parentTable"><tr > <td width="25%" valgin="top">  <table border=0 class="dragTable" cellspacing="0">   <tr>    <td><b>GMAIL</b></td>   </tr>   <tr>    <td>暫時無法顯示GMAIL內(nèi)容</td>   <tr>  </table><table border=0 class="dragTable" cellspacing="0">   <tr>    <td>新浪體育</td>   </tr>   <tr>    <td>解剖威隊獨門利器FW28 2萬轉(zhuǎn)引擎匹配超級變速器頒獎：辛吉斯欣喜能以冠軍起步 印度搭檔創(chuàng)下紀錄法新社前瞻冬奧短道速滑：中韓唱主角 美加施冷箭</td>   <tr>  </table><table border=0 class="dragTable" cellspacing="0">   <tr>    <td>焦點</td>   </tr>   <tr>    <td>京廣線中斷4小時20臨客返漢晚點中國新聞網(wǎng)-湖北分社 - 所有 235 相關(guān)報道 ?哈馬斯已有總理人選解放日報報業(yè)集團 - 所有 489 相關(guān)報道 ?陳水扁是兩岸關(guān)系麻煩制造者武漢晨報 - 所有 179 相關(guān)報道 ?</td>   <tr>  </table> </td> <td width="25%">  <table border=0 class="dragTable" cellspacing="0">   <tr>    <td>中關(guān)村在線</td>   </tr>   <tr>    <td>新年行情速遞 雙敏板卡低價推薦 終于等到了，映泰6600GT一降降一百 羅技G15游戲鍵盤熱力促銷，代購價僅529元 </td>   <tr>  </table></td> <td width="25%">  <table border=0 class="dragTable" cellspacing="0">   <tr>    <td>網(wǎng)易商業(yè)</td>   </tr>   <tr>    <td>上海GDP增幅去年出現(xiàn)回落應(yīng)對反傾銷 中國鞋企聯(lián)手對抗歐盟尹家緒操盤南方汽車 長安謀求曲線整體境外上市</td>   <tr>  </table> </td></tr></table></body></html></P>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

div版的

<P></P>
<P><style>#Demo4{margin-left:14px;}.DragContainer {float:left;width:360px;margin:5px;padding:5px;}.OverDragContainer {border:#ccc 2px solid;}.DragBox {border:#000 1px solid;width:350px;height:auto;background:#eee url(../images/right_title.gif) no-repeat left top;margin-bottom:5px;padding-top:5px;}.OverDragBox {border: #000 1px solid;width:350px;cursor:move;background:#eee url(../images/right_title.gif) no-repeat left top;;margin-bottom:5px;padding-top:5px;}.DragDragBox {border: #000 1px solid;width:350px;cursor:move;background:#eee url(../images/right_title.gif) no-repeat left top;;margin-bottom:5px;padding-top:5px;}.DragDragBox {FILTER:alpha(opacity=70);background:#eee url(../images/right_title.gif) no-repeat left top;}.DragBox img{margin-left:10px;}.DragDragBox  img{margin-left:10px;}.OverDragBox img{margin-left:10px;}egend {font-weight: bold;font-size:12px;color:#666699; font-family: verdana, tahoma, arial}fieldset {padding-right:3px;padding-left:3px;padding-bottom:3px;padding-top: 3px}.content{padding-left:8px;clear:both;height:25px;background:#fff;margin-top:5px;}.content li{list-style:none;width:75px;line-height:25px;float:left;}.history{background:#eee;} </style></P>
<P><fieldset id="Demo4"><legend>本頁面元素可以隨意拖拽</legend><div><div   id="ublnpf9mb"   class="DragContainer" id="DragContainer1" overclass="OverDragContainer"> <div   id="ublnpf9mb"   class="DragBox" overclass="OverDragBox" dragclass="DragDragBox">頂級站點<div   id="ublnpf9mb"   class="content" id="hot_content"><li><a   target="_blank">搜狐</a></li><li><a  target="_blank">新浪</a></li><li><a  target="_blank">網(wǎng)易</a></li><li><a  target="_blank">騰訊QQ</a></li><li><a  target="_blank">TOM</a></li><li><a  target="_blank">中華網(wǎng)</a></li><li><a   target="_blank">21CN</a></li><li><a  target="_blank">搜狗</a></li><li><a  target="_blank">Google</a></li><li><a   target="_blank">百度</a></li><li><a   target="_blank">雅虎</a></li><li><a   target="_blank">MSN中國</a></li></div></div><div   id="ublnpf9mb"   class="DragBox" id="Item2" overclass="OverDragBox" dragclass="DragDragBox">Item #2<p>歡迎您來到<a >www.achome.cn</a>,以后要常來噢</p></div><div   id="ublnpf9mb"   class=DragBox id=Item3 overclass="OverDragBox" dragclass="DragDragBox">Item #3</div><div   id="ublnpf9mb"   class=DragBox id=Item4 overclass="OverDragBox" dragclass="DragDragBox">Item #4</div></div>            <div   id="ublnpf9mb"   class="DragContainer" id="DragContainer2"  overclass="OverDragContainer"><div   id="ublnpf9mb"   class="DragBox" id=Item5 overclass="OverDragBox" dragclass="DragDragBox">Item #5</div><div   id="ublnpf9mb"   class="DragBox" id=Item6 overclass="OverDragBox" dragclass="DragDragBox">Item #6</div> </div>      </div></fieldset> </P>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]