js拖动效果
js拖动效果，可以去试试，最好是敲一遍/*** 标准的拖动控制代码* @param elementToDrag 需要拖动的对象* @param event 系统事件*/ var isMoveing = false;function drag(elementToDrag, event) {// The mouse position (in window coordinates)// at which the drag beginsvar 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 handlersdocument.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 2else event.cancelBubble = true; // IE// Now prevent any default action.if (event.preventDefault) event.preventDefault( ); // DOM Level 2else 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) {isMoveing = true;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.var dx = e.clientX - deltaX;var dy = e.clientY - deltaY;if(dx <= 0) dx = 0;if(dx>=document.body.offsetWidth - elementToDrag.offsetWidth ) dx = document.body.offsetWidth-elementToDrag.offsetWidth;if(dy>=document.body.offsetHeight - elementToDrag.offsetHeight) dy = document.body.offsetHeight-elementToDrag.offsetHeight;if(dy <=0 ) dy = 0;elementToDrag.style.left = dx + "px";elementToDrag.style.top = dy + "px";// And don't let anyone else see this event.if (e.stopPropagation) e.stopPropagation( ); // DOM Level 2else 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 modeldocument.removeEventListener("mouseup", upHandler, true);document.removeEventListener("mousemove", moveHandler, true);}else if (document.detachEvent) { // IE 5+ Event ModelelementToDrag.detachEvent("onlosecapture", upHandler);elementToDrag.detachEvent("onmouseup", upHandler);elementToDrag.detachEvent("onmousemove", moveHandler);elementToDrag.releaseCapture( );}else { // IE 4 Event Model// Restore the original handlers, if anydocument.onmouseup = olduphandler;document.onmousemove = oldmovehandler;}isMoveing = false;// And don't let the event propagate any further.if (e.stopPropagation) e.stopPropagation( ); // DOM Level 2else e.cancelBubble = true; // IE}}