Перетаскивание div должно изменить размер двух других div - PullRequest
Новая
       0

Перетаскивание div должно изменить размер двух других div

1 голос
/ 21 марта 2011

У меня есть три div, левый, правый и разделительный, и при перетаскивании div разделитель должен изменить размер левого и правого div.

HTML-код выглядит следующим образом 

<div id="left">Left</div>
        <div id="seperator">&nbsp;</div>
<div id="right"> Right</div>

Разделитель div можно перетаскивать с помощью следующего JavaScript 

var dragObject  = null;
    var mouseOffset = null;
    // document.onmousemove = mouseMove;
   //document.onmouseup    = mouseUp;


        var div_id = document.getElementById('seperator');
        makeDraggable(div_id);


    function getMouseOffset(target, ev){
        ev = ev || window.event;

        var docPos    = getPosition(target);
        var mousePos  = mouseCoords(ev);
        return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
    }

    function getPosition(e){
        var left = 0;
        var top  = 0;

        while (e.offsetParent){
            left += e.offsetLeft;
            top  += e.offsetTop;
            e     = e.offsetParent;
        }

        left += e.offsetLeft;
        top  += e.offsetTop;

        return {x:left, y:top};
    }

    function mouseMove(ev){           
        ev           = ev || window.event;
       // var mousePos = mouseCoords(ev);
        // mouseOffset = getMouseOffset(this, ev);
        if(dragObject){
            var div_left = document.getElementById('left');
            var div_right = document.getElementById('right');
            dragObject.style.position = 'relative';
            div_left.style.position = 'relative';
            div_left.style.width = ( (div_left.offsetWidth) -( mouseOffset.x) )+"px";
            div_right.style.position = 'relative';
            div_right.style.width =  ((div_right.offsetWidth) + (mouseOffset.x)) + "px";

            return false;
        }
    }

    function mouseUp(){
        dragObject = null;
    }

    function makeDraggable(item){
        if(!item) return;
        item.onmousedown = function(ev){
            dragObject  = this;
            mouseOffset = getMouseOffset(this, ev);
            var div_id = document.getElementById('seperator');
            div_id.addEventListener('mousemove', mouseMove,true);
            div_id.addEventListener('mouseup', mouseUp,true);
            return false;
        }
    }

    function mouseCoords(ev){
        if(ev.pageX || ev.pageY){
            return {x:ev.pageX, y:ev.pageY};
        }
        return {
            x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
            y:ev.clientY + document.body.scrollTop  - document.body.clientTop
        };
    }

Код для изменения размера выполняется в функции mouseMove ()

Код поясняется следующим образом

ссылка объясняет перетаскивание div

Итак, я хочу изменить размеры левого и правого div'ов, используя разделитель div

...