<!DOCTYPE HTML> <HTML> <HEAD></HEAD> <script> function drag(elementToDrag, event) { // The mouse position (in window coordinates) // at which the drag begins var startX = event.clientX, startY = event.clientY; // The original position (in document coordinates) of the // element that is going to be dragged. Since elementToDrag is // absolutely positioned, we assume that its offsetParent is the // document body. var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop; // Even though the coordinates are computed in different // coordinate systems, we can still compute the difference between them // and use it in the moveHandler( ) function. This works because // the scrollbar position never changes during the drag. var deltaX = startX - origX, deltaY = startY - origY; // Register the event handlers that will respond to the mousemove events // and the mouseup event that follow this mousedown event. if (document.addEventListener) { // DOM Level 2 event model // Register capturing event handlers document.addEventListener("mousemove", moveHandler, true); document.addEventListener("mouseup", upHandler, true); } else if (document.attachEvent) { // IE 5+ Event Model // In the IE event model, we capture events by calling // setCapture( ) on the element to capture them. elementToDrag.setCapture( ); elementToDrag.attachEvent("onmousemove", moveHandler); elementToDrag.attachEvent("onmouseup", upHandler); // Treat loss of mouse capture as a mouseup event. elementToDrag.attachEvent("onlosecapture", upHandler); } else { // IE 4 Event Model // In IE 4 we can't use attachEvent( ) or setCapture( ), so we set // event handlers directly on the document object and hope that the // mouse events we need will bubble up. var oldmovehandler = document.onmousemove; // used by upHandler( ) var olduphandler = document.onmouseup; document.onmousemove = moveHandler; document.onmouseup = upHandler; } // We've handled this event. Don't let anybody else see it. if (event.stopPropagation) event.stopPropagation( ); // DOM Level 2 else event.cancelBubble = true; // IE // Now prevent any default action. if (event.preventDefault) event.preventDefault( ); // DOM Level 2 else event.returnValue = false; // IE /** * This is the handler that captures mousemove events when an element * is being dragged. It is responsible for moving the element. **/ function moveHandler(e) { if (!e) e = window.event; // IE Event Model // Move the element to the current mouse position, adjusted as // necessary by the offset of the initial mouse-click. elementToDrag.style.left = (e.clientX - deltaX) + "px"; elementToDrag.style.top = (e.clientY - deltaY) + "px"; // And don't let anyone else see this event. if (e.stopPropagation) e.stopPropagation( ); // DOM Level 2 else e.cancelBubble = true; // IE } /** * This is the handler that captures the final mouseup event that * occurs at the end of a drag. **/ function upHandler(e) {
if (!e) e = window.event; // IE Event Model // Unregister the capturing event handlers. if (document.removeEventListener) { // DOM event model document.removeEventListener("mouseup", upHandler, true); document.removeEventListener("mousemove", moveHandler, true); } else if (document.detachEvent) { // IE 5+ Event Model elementToDrag.detachEvent("onlosecapture", upHandler); elementToDrag.detachEvent("onmouseup", upHandler); elementToDrag.detachEvent("onmousemove", moveHandler); elementToDrag.releaseCapture( ); } else { // IE 4 Event Model // Restore the original handlers, if any document.onmouseup = olduphandler; document.onmousemove = oldmovehandler; } // And don't let the event propagate any further. if (e.stopPropagation) e.stopPropagation( ); // DOM Level 2 else e.cancelBubble = true; // IE } } </script> <BODY> <div id="aa" onmousedown="drag(this,event)" style="position:absolute;width:100px;height:100px;border:1px solid red;"></div> </BODY> </HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
<div id="img" style="position:absolute;width:200px; height:151px;left:20px;top:10px"><img src="1.jpg" border="0"></div>
<script LANGUAGE="JavaScript">
var xPos = 20;
var yPos = 10;var step = 1;
var delay = 30;
var width,height,Hoffset,Woffset;
var y = 1;
var x = 1;
var interval;
var img=divcao = document.getElementById("img");
function changePos()
{
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
if (y)
{
yPos = yPos + step;
}
else
{
yPos = yPos - step;
}
if (yPos < 200)
{
y = 1;
yPos = 200;
}
if (yPos >= (height - Hoffset - 200))
{
y = 0;
yPos = (height - Hoffset-200);
}
if (x)
{
xPos = xPos + step;
}
else
{
xPos = xPos - step;
}
if (xPos < 200)
{
x = 1;
xPos = 200;
}
if (xPos >= (width - Woffset-200))
{
x = 0;
xPos = (width - Woffset-200);
}
img.style.left = xPos + document.body.scrollLeft;
img.style.top = yPos + document.body.scrollTop;
}
function start()
{ interval = setInterval('changePos()', delay);
}
function pause_resume()
{
clearInterval(interval);
}
start();
</script>
<script language=javascript>
var cao_x;
var cao_y;
var divcao;
var isDown = false;
function display()
{ //document.write("<table align=center><tr><td><button style='width:100px;height:30px;font-size:12px;border:1px solid #A4B3C8;background-color:green;' type=button onclick=document.getElementById('cao1').style.display='block' onfocus=this.blur()>查看效果</button></td></tr></table>");
document.write("<div id='cao1' style='position:absolute;display:none;width:200px;height:180px;font-size:12px;position:absolute;text-align:center;background-color:#ddd;' >");
document.write("<div style='z-index:500'>");
document.write("<table width=200 height=20 bgcolor=green style='cursor:move;' onmousedown='mdown(event)' > ");
document.write("<tr align=center>");
document.write("<td align=left>按下左键可拖动</td>");
document.write("</tr>");
document.write("</table>");
document.write("<span style= cursor:hand onclick=this.parentNode.parentNode.style.display='none';><br>可拖动层<br></span>");
document.write(" </div>");
document.write("</div>");
}
function mdown(ev)
{
ev=ev||event;
var x = ev.x||ev.pageX;
var y= ev.y ||ev.pageY;
cao_x=x-parseInt(divcao.style.left);
cao_y=y-parseInt(divcao.style.top);
isDown =true;
}
function caoMove(ev) //实现层的拖移
{
if(isDown){
ev=ev||event;
if(ev.button==1|| ev.button==0)
{
var cX=divcao.clientLeft;
var cY=divcao.clientTop;
var x = ev.x||ev.pageX;
var y= ev.y ||ev.pageY;
x = cX+(x-cao_x);
x= x<0 ? 0:( x>(cX=getClientWidth()-divcao.offsetWidth)?cX:x);
y=cY+(y-cao_y);
cY= getScrollTop();
cY=cY<0?0:cY;
y= y<cY ? cY :(y>(cY= cY + getClientHeight() - divcao.offsetHeight)?cY:y); divcao.style.left=(x)+"px";
divcao.style.top=(y)+"px";
}
}
}
document.onmouseup=function(){ isDown =false;};
document.onmousemove=function(e){ caoMove(e);};display();
setTimeout(function(){
divcao = document.getElementById("cao1");
divcao.style.display="";
divcao.style.left =((getClientWidth()-200)/2)+ "px";
divcao.style.top =(getClientHeight() - divcao.offsetHeight)/2 +getScrollTop()+ "px";},500);window.onscroll=function(ev){ if(divcao)
{
// divcao.style.top =( (document.body.clientHeight - divcao.offsetHeight)/2 +document.body.scrollTop )+"px" ;
SetTop();
}
};
function SetTop()
{
var toTop = (getClientHeight() - divcao.offsetHeight)/2 +getScrollTop();
var top = parseInt(divcao.style.top);
if(top<toTop-1)
{
divcao.style.top = (++top) +"px";
setTimeout(function(){SetTop();},5);
}else if(top>toTop+1){
divcao.style.top = (--top) +"px";
setTimeout(function(){SetTop();},5);
}else{
divcao.style.top = (toTop) +"px";
}
} /********************
* 取窗口滚动条滚动高度
******************/
var getScrollTop=function ()
{
return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ;
};
/********************
* 取窗口可视范围的高度
*******************/
var getClientHeight=function()
{
return (navigator.userAgent.toLowerCase().indexOf('opera') != -1)?document.body.clientHeight:document.documentElement.clientHeight;
};
/********************
* 取窗口可视范围的宽度
*******************/
var getClientWidth=function()
{
return (navigator.userAgent.toLowerCase().indexOf('opera') != -1)?document.body.clientWidth:document.documentElement.clientWidth;
};
</script>
</body>
</html>
官网参考
http://jqueryui.com/demos/draggable/
<HTML>
<HEAD></HEAD>
<script>
function drag(elementToDrag, event) {
// The mouse position (in window coordinates)
// at which the drag begins
var startX = event.clientX, startY = event.clientY; // The original position (in document coordinates) of the
// element that is going to be dragged. Since elementToDrag is
// absolutely positioned, we assume that its offsetParent is the
// document body.
var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop; // Even though the coordinates are computed in different
// coordinate systems, we can still compute the difference between them
// and use it in the moveHandler( ) function. This works because
// the scrollbar position never changes during the drag.
var deltaX = startX - origX, deltaY = startY - origY; // Register the event handlers that will respond to the mousemove events
// and the mouseup event that follow this mousedown event.
if (document.addEventListener) { // DOM Level 2 event model
// Register capturing event handlers
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true);
}
else if (document.attachEvent) { // IE 5+ Event Model
// In the IE event model, we capture events by calling
// setCapture( ) on the element to capture them.
elementToDrag.setCapture( );
elementToDrag.attachEvent("onmousemove", moveHandler);
elementToDrag.attachEvent("onmouseup", upHandler);
// Treat loss of mouse capture as a mouseup event.
elementToDrag.attachEvent("onlosecapture", upHandler);
}
else { // IE 4 Event Model
// In IE 4 we can't use attachEvent( ) or setCapture( ), so we set
// event handlers directly on the document object and hope that the
// mouse events we need will bubble up.
var oldmovehandler = document.onmousemove; // used by upHandler( )
var olduphandler = document.onmouseup;
document.onmousemove = moveHandler;
document.onmouseup = upHandler;
} // We've handled this event. Don't let anybody else see it.
if (event.stopPropagation) event.stopPropagation( ); // DOM Level 2
else event.cancelBubble = true; // IE // Now prevent any default action.
if (event.preventDefault) event.preventDefault( ); // DOM Level 2
else event.returnValue = false; // IE /**
* This is the handler that captures mousemove events when an element
* is being dragged. It is responsible for moving the element.
**/
function moveHandler(e) {
if (!e) e = window.event; // IE Event Model // Move the element to the current mouse position, adjusted as
// necessary by the offset of the initial mouse-click.
elementToDrag.style.left = (e.clientX - deltaX) + "px";
elementToDrag.style.top = (e.clientY - deltaY) + "px"; // And don't let anyone else see this event.
if (e.stopPropagation) e.stopPropagation( ); // DOM Level 2
else e.cancelBubble = true; // IE
} /**
* This is the handler that captures the final mouseup event that
* occurs at the end of a drag.
**/
function upHandler(e) {
if (!e) e = window.event; // IE Event Model // Unregister the capturing event handlers.
if (document.removeEventListener) { // DOM event model
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", moveHandler, true);
}
else if (document.detachEvent) { // IE 5+ Event Model
elementToDrag.detachEvent("onlosecapture", upHandler);
elementToDrag.detachEvent("onmouseup", upHandler);
elementToDrag.detachEvent("onmousemove", moveHandler);
elementToDrag.releaseCapture( );
}
else { // IE 4 Event Model
// Restore the original handlers, if any
document.onmouseup = olduphandler;
document.onmousemove = oldmovehandler;
} // And don't let the event propagate any further.
if (e.stopPropagation) e.stopPropagation( ); // DOM Level 2
else e.cancelBubble = true; // IE
}
}
</script>
<BODY>
<div id="aa" onmousedown="drag(this,event)" style="position:absolute;width:100px;height:100px;border:1px solid red;"></div>
</BODY>
</HTML>