1 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>拖动DIV</title> 7 8 <style type="text/css"> 9 .show{ 10 background:#7cd2f8; 11 100px; 12 height:100px; 13 text-align:center; 14 position:absolute; 15 z-index:1; 16 left:100px; 17 top:100px; 18 } 19 </style> 20 21 <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/165/x9ajweu6/1.5_jquery.min.js"></script> 22 <script type="text/javascript"> 23 $(document).ready(function(){ 24 $(".show").mousedown(function(e){ //e鼠标事件 25 $(this).css("cursor","move");//改变鼠标指针的形状 26 27 var offset = $(this).offset();//DIV在页面的位置 28 var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离 29 var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离 30 $(document).bind("mousemove",function(ev){ //绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件 31 $(".show").stop();//加上这个之后 32 33 var _x = ev.pageX - x;//获得X轴方向移动的值 34 var _y = ev.pageY - y;//获得Y轴方向移动的值 35 36 $(".show").animate({left:_x+"px",top:_y+"px"},10); 37 }); 38 }); 39 40 $(document).mouseup(function(){ 41 $(".show").css("cursor","default"); 42 $(this).unbind("mousemove"); 43 }); 44 }); 45 </script> 46 </head> 47 <body> 48 <div class="show"> 49 jquery实现DIV层拖动 50 </div> 51 </body> 52 </html>