视频中老师是引入了库实现拖拽，没有详细的讲。我想自己写着试试看，好不容易搞出来了，但是拖动的时候就没法按下那个小div实现缩放了。而且拖动的时候会有一点小瑕疵。

由于小女子自身水平不够，不能很好的理解这两者的逻辑及顺序，如有大神讲解一下，实在感激不尽，谢谢！

<script>
    window.onload=function() {
        document.onselectstart=new Function('event.returnValue=false;');
        var oTop = document.getElementById('mtop');
        var oLeft = document.getElementById('mleft');
        var oRight = document.getElementById('mright');
        var oUp = document.getElementById('mup');
        var oBox = document.getElementById('mox');
        var img2 = document.getElementById('img2');
        var ifKeyDown = false;
        var contact = '';

        oBox.onmousedown= function (ev) {
            var disX= ev.clientX-oBox.offsetLeft-img2.offsetLeft;
            var disY= ev.clientX-oBox.offsetTop-img2.offsetTop;
            document.onmousemove= function (ev) {
                var l=ev.clientX-disX-img2.offsetLeft;
                var t=ev.clientY-disY-img2.offsetTop;
                if(l<0){
                    l=0;
                }
                else if(l>img2.offsetWidth-oBox.offsetWidth){
                    (l=img2.offsetWidth-oBox.offsetWidth)
                }
                if(t<0) {
                    t = 0;
                }
                else if(t>img2.offsetHeight-oBox.offsetHeight){
                    t=img2.offsetHeight-oBox.offsetHeight
                }
                oBox.style.left=l+'px';
                oBox.style.top=t+'px';
            };
            document.onmouseup= function () {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };

        oRight.onmousedown = function () {
            ifKeyDown = true;
            contact = 'right';
        };
        oTop.onmousedown = function () {
            ifKeyDown = true;
            contact = 'top';
        };
        oLeft.onmousedown = function () {
            ifKeyDown = true;
            contact = 'left';
        };
        oUp.onmousedown = function () {
            ifKeyDown = true;
            contact = 'up';
        };
        window.onmouseup = function () {
            ifKeyDown = false;
        };
        window.onmousemove = function (e) {
            if (ifKeyDown == true) {
                switch (contact){
                    case "right": rightMove(e);break;
                    case "top": topMove(e);break;
                    case "left": leftMove(e);break;
                    case "up": upMove(e);break;
                }
            }
            setChoice();
            setPreview()
        };
        function rightMove(e){
            var x = e.clientX;
            var widthBefore = oBox.offsetWidth - 2;
            var addWidth = " ";
            addWidth = x - getPosition(oBox).left - widthBefore;
            oBox.style.width = addWidth + widthBefore + 'px';
        }

        function topMove(e){
            var y= e.clientY;
            var boxY=getPosition(oBox).top;
            var addHeight= boxY-y;
            var heightBefore = oBox.offsetHeight-2;
            oBox.style.height=heightBefore+addHeight+'px';
            oBox.style.top=oBox.offsetTop-addHeight+'px'
        }

        function leftMove(e){
            var x = e.clientX;
            var boxX=getPosition(oBox).left;
            var addWidth = boxX-x;
            var widthBefore= oBox.offsetWidth-2;
            oBox.style.width=widthBefore+addWidth+"px";
            oBox.style.left=oBox.offsetLeft-addWidth+"px";
        }

        function upMove(e){
            var y= e.clientY;
            var heightBefore=oBox.offsetHeight-2;
            var addHight=" ";
            addHeight=y-getPosition(oBox).top-heightBefore;
            oBox.style.height= heightBefore+addHeight+"px";
        }

        function getPosition(node){
            var left = node.offsetLeft;
            var top = node.offsetTop;
            var parent = node.offsetParent;
            while(parent!= null){
                left+=parent.offsetLeft;
                top+=parent.offsetTop;
                parent=parent.offsetParent;
            }
            return {"left":left,"top":top};
        }

        function setChoice(){
            var top=oBox.offsetTop;
            var right=oBox.offsetLeft+oBox.offsetWidth;
            var bottom=oBox.offsetTop+oBox.offsetHeight;
            var left=oBox.offsetLeft;
            img2.style.clip="rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
        }

        function setPreview(){
            var top=oBox.offsetTop;
            var right=oBox.offsetLeft+oBox.offsetWidth;
            var bottom=oBox.offsetTop+oBox.offsetHeight;
            var left=oBox.offsetLeft;
            var img3=document.getElementById("img3");
            img3.style.top=-top+"px";
            img3.style.left=-left+"px";
            img3.style.clip="rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
        }
    };


</script>