JS拖拽的進一步練習，移動與拉伸實現(xiàn)代碼

更新時間：2012年05月23日 23:31:40 作者：

這次增加了一些相關的功能，增加四個角的拉伸改變寬度，主要還是用到一些簡單的坐標位置計算，沒有什么技術難度，熟練了一下自己對拖拽的運用

直接在本地是支持IE6的，有個問題就是，鼠標點擊的時候光標會變?yōu)檫x擇文字的光標，不知道應該怎么處理這個問題呢？
在此記錄一下代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>簡單拖拽擴展</title> <style type="text/css"> *{margin:0;padding:0;} #outwarp{ margin:20px auto; width:600px; height:600px; background:#fff; border:1px solid #333; position: relative; } .controlBox{ width:200px; height:200px; position: absolute; left:25px; top:50px; background:#ccc; font-size:12px; color:#fff; border: 1px solid #333;} .controlBar{cursor: move;} .controlBar h2{ font-size:12px; text-align: center; line-height: 25px; background: blue;} .innerCon{text-align: left; line-height: 20px;} .innerCon p{ padding: 10px; color: #000;} .resize{ position: absolute; height: 10px; width:10px; color: white; z-index: 10; background: red;} .lt{left:0;right:0; cursor:nw-resize;} .tr{right:0;top: 0;cursor:ne-resize;} .rb{right:0;bottom: 0; cursor:nw-resize;} .bl{left:0;bottom:0;cursor:ne-resize;} </style> </head> <body> <div   class="ublnpf9mb"   id="outwarp"> <div   id="ublnpf9mb"   class="controlBox"> <div   id="ublnpf9mb"   class="resize lt"></div> <div   id="ublnpf9mb"   class="resize tr"></div> <div   id="ublnpf9mb"   class="resize rb"></div> <div   id="ublnpf9mb"   class="resize bl"></div> <div   id="ublnpf9mb"   class="controlBar"> <h2>按此處拖動</h2> </div> <div   id="ublnpf9mb"   class="innerCon"> <p>中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間 內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容 中間內容中間內容中間內容中間內容中間內容中間內容</p> </div> </div> </div>  </body> </html>

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

您可能感興趣的文章: