之前一直想自己來寫個拖動div的js代碼，一直沒動手，昨晚寫了一下，然後百度了一下相關的文章，發現貌似不太詳細？？
代碼演示：
http://www.imqing.com/demo/movediv.html
大概原理：
使div的position爲絕對定位absolute，然後控制其top與left值，需要監聽鼠標事件，主要用到mousedown, mousemove, mouseup。
在mousedown後，記錄mousedown時鼠標與需要移動的div的位置，然後取得兩者之差，得到在鼠標移動後，div的位置。即：
- left = 當前鼠標位置.x - (鼠標點擊時的.x值 - div的初始位置x值)
- top = 當前鼠標位置.y - (鼠標點擊時的.y值 - div的初始位置y值)
代碼：
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
- <title>Qing's Web</title>
- <script src="./jquery-1.7.2.min.js" type="text/javascript"></script>
- <style type="text/css">
- .footer {
- position: fixed;
- bottom: 0;
- width: 100%;
- }
- .moveBar {
- position: absolute;
- width: 250px;
- height: 300px;
- background: #666;
- border: solid 1px #000;
- }
- #banner {
- background: #52CCCC;
- cursor: move;
- }
- </style>
- </head>
- <body style="padding-top: 50px;">
- <div class="moveBar">
- <div id="banner">按住此處移動當前div</div>
- <div class="content">這裏是其它內容</div>
- </div>
- <div class="footer">
- <p align="center" class="label">ALL Rights Reserved Qing 版權所有</p>
- </div>
- <script>
- jQuery(document).ready(
- function () {
- $('#banner').mousedown(
- function (event) {
- var isMove = true;
- var abs_x = event.pageX - $('div.moveBar').offset().left;
- var abs_y = event.pageY - $('div.moveBar').offset().top;
- $(document).mousemove(function (event) {
- if (isMove) {
- var obj = $('div.moveBar');
- obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y});
- }
- }
- ).mouseup(
- function () {
- isMove = false;
- }
- );
- }
- );
- }
- );
- </script>
- </body>
- </html>
其實代碼量也不多的，嘿嘿。要點就是需要移動的div的position是絕對定位，然後檢測鼠標事件就行了。嘿嘿。