<div class="codetitle"> <span><a style="CURSOR: pointer" data="44123" class="copybut" id="copybut44123" onclick="doCopy('code44123')"><u>复代码</u></a></span> 代码如下:</div> <div class="codebody" id="code44123"> <br><%@ 페이지 언어="java" contentType="text/ html; charset=utf-8" <BR>pageEncoding="utf-8"%> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><머리> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br><title>拖动DIV</title> <br><style type="text/css"> <br>.show{ <br>배경:#7cd2f8; <br>폭:100px; <br>높이:100px; <br>텍스트 정렬:가운데; <br>위치:절대; <br>z-색인:1; <br>왼쪽:100px; <br>상단:100px; <br>} <br><br></style> <br><script type="text/javascript" src="../Script/jquery-1.7.2.js"></script> <br><script type="text/javascript"><!-- <BR>$(document).ready(function() <BR>{ <BR>$(".show").mousedown( function(e)//e鼠标事件 <BR>{ <BR>$(this).css("cursor","move");//改变鼠标指针형 모양 <br><br>var offset = $( this).offset();//DIV는 화면상에 <BR>var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离 <BR>var y = e.pageY - offset.top;//获得鼠标指针离DIV 元素上边界的距离 <BR>$(document).bind("mousemove",function(ev)//绑定鼠标的移动事件 ，因为光标在DIV 元素光标也要有效果, 所以要用 문서 사건, 而不用 DIV 元素的 사건 <BR>{ <BR>$(".show").stop();//加上这个の后 <br><br>var _x = ev.pageX - x;//获得X轴方向移动的值 <BR>var _y = ev.pageY - y;//获得Y轴方向移动的值 <br><br>$(".show") .animate({left:_x "px",top:_y "px"},10) <BR>}) <br><br>$(document).mouseup( function() <br>{ <br>$(".show").css("cursor","default") <BR>$(this).unbind("mousemove") <BR>}) <BR>}) <BR><BR>// --></script> <br></head> <br><본문> <br><div class="show"> <br>jquery实现DIV层拖动 <br></div> <br></body> <br></html> <br><br> </div>
