拖拽元素脚本-优快云博客

转自http://www.365tech.net/Programme_Others/30968

非常不错的脚本对象移动，直接看效果就可以了！！！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>shawl.qiu template</title>
<script type="text/javascript">
//<![CDATA[
     function fDragging(obj, e, limit){
         if(!e) e=window.event;
         var x=parseInt(obj.style.left);
         var y=parseInt(obj.style.top);

         var x_=e.clientX-x;
         var y_=e.clientY-y;

         if(document.addEventListener){
             document.addEventListener('mousemove', inFmove, true);
             document.addEventListener('mouseup', inFup, true);
         } else if(document.attachEvent){
             document.attachEvent('onmousemove', inFmove);
             document.attachEvent('onmouseup', inFup);
         }

         inFstop(e);
         inFabort(e)

         function inFmove(e){
             var evt;
             if(!e)e=window.event;

             if(limit){
                 var op=obj.parentNode;
                 var opX=parseInt(op.style.left);
                 var opY=parseInt(op.style.top);

                 if((e.clientX-x_)<0) return false;
                 else if((e.clientX-x_+obj.offsetWidth+opX)>(opX+op.offsetWidth)) return false;

                 if(e.clientY-y_<0) return false;
                 else if((e.clientY-y_+obj.offsetHeight+opY)>(opY+op.offsetHeight)) return false;
                 //status=e.clientY-y_;
             }

             obj.style.left=e.clientX-x_+'px';
             obj.style.top=e.clientY-y_+'px';

             inFstop(e);
         } // shawl.qiu script
         function inFup(e){
             var evt;
             if(!e)e=window.event;

             if(document.removeEventListener){
                 document.removeEventListener('mousemove', inFmove, true);
                 document.removeEventListener('mouseup', inFup, true);
             } else if(document.detachEvent){
                 document.detachEvent('onmousemove', inFmove);
                 document.detachEvent('onmouseup', inFup);
             }

             inFstop(e);
         } // shawl.qiu script

         function inFstop(e){
             if(e.stopPropagation) return e.stopPropagation();
             else return e.cancelBubble=true;
         } // shawl.qiu script
         function inFabort(e){
             if(e.preventDefault) return e.preventDefault();
             else return e.returnValue=false;
         } // shawl.qiu script
     }
//]]>
</script>
</head>
<body>
<div style=" border:1px dashed blue; width: 760px; height:600px; text-align:center; position:absolute; left:100px; top: 10px;"> this parent

     <div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:50px; top: 50px;" onmousedown="fDragging(this, event, true);">
         element <br/>
         dragging compatibility for IE, Opera, Firefox.
     </div>
     <div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:100px; top: 150px;" onmousedown="fDragging(this, event, true);">
         element 1<br/>
         dragging compatibility for IE, Opera, Firefox.
     </div>
     <div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:200px; top: 250px;" onmousedown="fDragging(this, event, false);">
         element 2<br/>
         dragging compatibility for IE, Opera, Firefox. <br/>
         <font color="red">dragging everywhere</font>
     </div>
</div>
</body>
</html>

js移动页面对象（转）