JS拖拽的進一步練習，移動與拉伸實現代碼

2024-05-06 14:21:48

字體：大中小

來源：轉載

供稿：網友

直接在本地是支持IE6的，有個問題就是，鼠標點擊的時候光標會變為選擇文字的光標，不知道應該怎么處理這個問題呢？
在此記錄一下代碼：
<!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> <h2>按此處拖動</h2> <p>中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容</p> </body> </html>
[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：javascript學習筆記(一) 在html中使用javascript

下一篇：nodejs win7下安裝方法