虚構付きドラッグ

実はこの原理も簡単です.つまり、マウスを押すと要素の周囲に虚枠が現れ、マウスを動かすと虚枠だけが移動し、要素は移動せず、マウスを持ち上げると、直接要素を虚枠位置に移動し、虚枠が消える.
例:
CSSコード:

 *{margin:0;padding:0;}
        #div1{width:100px;height: 100px;background: red;position: absolute;left:10px;top:10px;}
        #vbox{width:98px;height: 98px;position: absolute;left:10px;top:10px;border: 1px dashed black;display: none;}

JSコード:

 window.onload = function () {
            var oDiv1 = document.getElementById('div1');
            var oDiv2 = document.getElementById('vbox');
            oDiv1.onmousedown = function (ev) {
                drag(this,oDiv2,ev);
                return false;
            }
        };
        //    
        function drag(objReal,objVir,ev)//  ev obj      {
            var pos = getPos(ev);
            var disX = pos.x - objReal.offsetLeft;
            var disY = pos.y - objReal.offsetTop;
            objVir.style.display = 'block';
            document.onmousemove = function (ev) //  ev document      {
                var pos = getPos(ev);   //      
                var l = pos.x - disX;   //(l,t)         
                var t = pos.y - disY;

                //         
                if(l<0)
                    l = 0;
                else if(l > document.documentElement.clientWidth - objVir.offsetWidth)
                    l = document.documentElement.clientWidth - objVir.offsetWidth;
                if(t<0)
                    t = 0;
                else if(t > document.documentElement.clientHeight - objVir.offsetHeight)
                    t = document.documentElement.clientHeight - objVir.offsetHeight;
                //    
                objVir.style.left = l + 'px';
                objVir.style.top = t + 'px';
            };
            document.onmouseup = function () {
                document.onmousemove = null;   //    
                document.onmouseup = null;     //         null
                objVir.style.display = 'none';
                //    
                objReal.style.left = objVir.style.left;
                objReal.style.top = objVir.style.top;
                if(objReal.releaseCapture)    //  
                    objReal.releaseCapture();
            };
            if(objReal.setCapture)     //            obj 
                objReal.setCapture();
        }
        //    
        function getPos(ev) {
            var oEvent = ev||event;  //    
            //        ，        ,  oEvent.clientX       .
            var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
            var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
            return {x:oEvent.clientX + scrollLeft,y:oEvent.clientY + scrollTop};//    JSON  
        }