Drag&Drop and resize

[wawandas]

Помогите понять в чем проблема, я только начал, еще зеленый. Проблема вот в чем, элемент перемещается нормально, но вот неадекватно resize'зиться (когда тянешь угл происходит resize и перемещение элемента) Решение нужно на чистом JS.заранее спасибо

var OffsetX, OffsetY;
/*crossbrowser offSet!!!!!!!!!!!!!*/
function corOffset(e)
{
    var isOpera, isIE, isNav, isFox, isOther = true;
    if (navigator.userAgent.indexOf("Opera")!=-1) 
    
    {
        isOpera = true;
    } else if (navigator.userAgent.indexOf("Firefox")!=-1) 
    {
     isFox = true;
    } else if (navigator.appName == "Microsoft Internet Explorer") 
    {
     isIE = true;
    } else 
    {
     isOther = true;
    }
     
        if (isIE)
        {
         OffsetX = e.offsetX;
         OffsetY = e.offsetY;
        } 
            else 
        {
             OffsetX = e.pageX - document.getElementById("divImage").offsetLeft; //OffsetX = e.layerX ;  OffsetY = e.layerY;
             OffsetY = e.pageY - document.getElementById("divImage").offsetTop;
        }
}
        
     
    var elementToDrag = null;                     
    var offX, offY; // глобальные переменные для хранения смещения     
    
    function captureElement (elem, e) 
    { // "захват" элемента мышью 
        if (!elementToDrag) {
            elementToDrag = elem;
            offX = OffsetX; // запоминаем координаты курсора 
            offY = OffsetY; // в момент щелчка 
        }
    }    
    function releaseElement () 
        { // "отпускание" элемента 
        if(elementToDrag != null)
            {
                elementToDrag = null;
            }
            else
            {
                
            }
        }    
    function dragElement (e) { // "перетаскивание" элемента 
        if (elementToDrag)
        {
            elementToDrag.style.left = e.clientX - offX ; // вносим поправку 
            elementToDrag.style.top = e.clientY - offY ;  // в координаты элемента 
        }
    }
        document.onmouseup = releaseElement;
var theobject = null; //This gets a value as soon as a resize start
 
 
////////////////////////resize//////////////////////
 
function resizeObject() 
{
    this.el        = null; //pointer to the object
    this.dir    = "";      //type of current resize (n, s, e, w, ne, nw, se, sw)
    this.grabx = null;     //Some useful values
    this.graby = null;
    this.width = null;
    this.height = null;
    this.left = null;
    this.top = null;
}
    
//Find out what kind of resize! Return a string inlcluding the directions
function getDirection(el) 
{
    var xPos, yPos, offset, dir;
    dir = "";
    xPos = OffsetX;
    yPos = OffsetY;
    offset = 10; //The distance from the edge in pixels
    if (yPos<offset) dir += "n"; //если Y меньше 10 -это север
    
    else if (yPos > el.offsetHeight-offset) dir += "s"; //если Y больше восота-зона -это юг
    
    if (xPos<offset) dir += "w"; //если X меньше нуля -это запад
    
    else if (xPos > el.offsetWidth-offset) dir += "e"; //если X больше ширина-зона -это восток
    return dir;
}
function doDown(e) 
{
    var e = e ? e : window.event;
    var event_element = e.target ? e.target : e.srcElement;
    var el = getReal(event_element, "className", "resizeMe");
    if (el == null) 
    {
        theobject = null;
        return;
    }        
    dir = getDirection(el);
    if (dir == "") return;
    theobject = new resizeObject();
        
    theobject.el = el;
    theobject.dir = dir;
    theobject.grabx = e.clientX;
    theobject.graby = e.clientY;
    theobject.width = el.offsetWidth;
    theobject.height = el.offsetHeight;
    theobject.left = el.offsetLeft;
    theobject.top = el.offsetTop;
    e.returnValue = false;
    e.cancelBubble = true;
}
function doUp() 
    {
        if (theobject != null) 
        {
            theobject = null;
        }
    }
function doMove(e) 
    {
        var e = e ? e : window.event; //кроссбраузерное решение
        var event_element = e.target ? e.target : e.srcElement;
        
        var el, xPos, yPos, str, xMin, yMin;
        xMin = 20; //The smallest width possible
        yMin = 20; //             height
        el = getReal(event_element, "className", "resizeMe");
        if (el.className == "resizeMe") 
            {
                    str = getDirection(el);
                //Fix the cursor    
                    if (str == "") 
                        {
                            str = "default";
                        }
                    else 
                        {
                            str += "-resize";
                        }
                    el.style.cursor = str;
            }
    
//Dragging starts here
    if(theobject != null) 
    {
        if (dir.indexOf("e") != -1)
        {
            theobject.el.style.width = Math.max(xMin, theobject.width + e.clientX - theobject.grabx) + "px";
        }
        if (dir.indexOf("s") != -1)
        {
            theobject.el.style.height = Math.max(yMin, theobject.height + e.clientY - theobject.graby) + "px";
        }
        if (dir.indexOf("w") != -1) 
        {
            theobject.el.style.left = Math.min(theobject.left + e.clientX - theobject.grabx, theobject.left + theobject.width - xMin) + "px";
            theobject.el.style.width = Math.max(xMin, theobject.width - e.clientX + theobject.grabx) + "px";
        }
        if (dir.indexOf("n") != -1) 
        {
            theobject.el.style.top = Math.min(theobject.top + e.clientY - theobject.graby, theobject.top + theobject.height - yMin) + "px";
            theobject.el.style.height = Math.max(yMin, theobject.height - e.clientY + theobject.graby) + "px";
        }
        
        e.returnValue = false;
        e.cancelBubble = true;
    } 
}
function getReal(el, type, value) 
{
    var temp = el;
    while ((temp != null) && (temp.tagName != "BODY")) 
        {
            if (eval("temp." + type) == value) 
                {
                    el = temp;
                    return el;
                }
            temp = temp.parentElement;
        }
    return el;
}
document.onmousedown = doDown;
document.onmouseup = doUp;
document.onmousemove = doMove;

<head>
<style type="text/css">
#divImage
{ 
    position:absolute;
    background:#ece0fb; 
    width:60px; 
    left:50px;
    height:60px;
}
 </style>
</head>
<body onmousemove = "corOffset(event), dragElement(event)">
    <div id="divImage" class="resizeMe" onmousedown="captureElement(this)" onmouseup="releaseElement()"></div>
</body>