之前一直想自己来写个拖动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是绝对定位，然后检测鼠标事件就行了。嘿嘿。