jquery版
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-1.4.4.js"></script> <script type="text/javascript">$(function()
{ $("#move").bind("mousedown",function() { var mouserelativepX=event.offsetX; var mouserelativepY=event.offsetY; $(this).bind("mousemove"); this.setCapture(); $("#move").bind("mousemove",function() { var x=event.clientX-mouserelativepX; var y=event.clientY-mouserelativepY; $(this).css({left:x,top:y}); }); $("#move").bind("mouseup",function() { $(this).unbind("mousemove"); this.releaseCapture(); }); }); }); </script> </head> <body> <div id='move' style="position: absolute;cursor:move; z-index: 100;width: 30px;height: 30px; border: 1px solid #efefef;vertical-align: middle;" align="center">go</div> </body> </html>
javascript版
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> <html> <head> <script src="js/jquery-1.4.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">
window.οnlοad=function(){ objDiv = document.getElementById('drag'); drag(objDiv); };function drag(dv){
dv.οnmοusedοwn=function(e){ var d=document; e = e || window.event; var x= e.layerX || e.offsetX; var y= e.layerY || e.offsetY; document.all.x.value=x; document.all.y.value=y; //设置捕获范围 if(dv.setCapture){ dv.setCapture(); }else if(window.captureEvents){ window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); }d.οnmοusemοve=function(e){
e= e || window.event; if(!e.pageX)e.pageX=e.clientX; if(!e.pageY)e.pageY=e.clientY; var tx=e.pageX-x; var ty=e.pageY-y; document.all.tx.value=tx; document.all.ty.value=ty; dv.style.left=tx; dv.style.top=ty; $(dv).css({left:tx,top:ty}); };d.οnmοuseup=function(){
//取消捕获范围 if(dv.releaseCapture){ dv.releaseCapture(); }else if(window.captureEvents){ window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); } //清除事件 d.οnmοusemοve=null; d.οnmοuseup=null; }; }; } </script> </head><body>
<div id="drag" style=" position:absolute;left:120px;top:24px;width:100;height:150;border:1px solid #000000;z-index:1;background:#eeeeee;cursor: move;">drag me</div>x:<input type="text" name="x"> y:<input type="text" name="y">
</br> tx:<input type="text" name="tx"> ty:<input type="text" name="ty"></body>
</html>