Как растянуть элемент

[rawuk]

Еще раз здрасте,
какой скрипт поможет, чтобы элементы div могли изменять рамер.(растягиваться) Мышкой. за правый нижний угол.

[FINoM]

jQuery UI Resizable

[donote]

Можете подсказать, как сделать тоже самое только неиспользуя JQuery и прочие библиотеки?

При этом элемент div тоже создается (изначально не в html)
rezDiv = document.createElement('div');

[Aetae]

Как как. Ручками. Читай статьи на этом сайте. Либо же используй гугл.
Начни отсюда.

[donote]

Собрал draggable и resize функции, но работают они по отдельности.

Если dragDiv.setAttribute('onmousedown','drag_object(ev ent, this)'); закомментить, то ресайз начинает работать. если нет, то работает перемещение, а ресайз нет.
Как сдружить две функции? чтобы и перемещалось и растягивалось?

// DRAGGABLE
dragDiv = document.createElement('DIV');
dragDiv.style.position = 'absolute';
dragDiv.style.cursor = 'move';
dragDiv.style.margin = '0 auto';
dragDiv.style.width = '184px';
dragDiv.style.height = '184px';
dragDiv.style.left = '500px';
dragDiv.setAttribute('onmousedown','drag_object(event, this)');
boxDiv.appendChild(dragDiv);

// RESIZABLE
 els=document.createElement('div')
 els.style.cssText='background:#0084FF;position:relative;width:100%;height:100%;'
  // задаем стиль округления
 els.style.borderRadius = '10px';
 els.style.WebkitBorderRadius = '10px';
 els.style.KhtmlBorderRadius = '10px';
 els.style.OperaBorderRadius = '10px';
 els.style.MozBorderRadius = '10px';

// задаем стиль тени
 els.style.BoxShadow = '0 0 30px #000000';
 els.style.WebkitBoxShadow = '0 0 30px #000000';
 els.style.KhtmlBoxShadow = '0 0 30px #000000';
 els.style.OperaBoxShadow = '0 0 30px #000000';
 els.style.MozBoxShadow = '0 0 30px #000000';
 dragDiv.appendChild(els)

var els=dragDiv.getElementsByTagName('div')
if(els){var div=document.createElement('div')
 div.style.cssText='right:1px;bottom:1px;margin-top:100%;margin-left:100%;overflow:hidden;text-indent:-99999px;width:33px;height:33px;display:block;position:absolute;z-index:1001;-moz-user-select:none;background-position:-64px-224px;cursor:se-resize;background:url(img/window_resize.png) no-repeat';
 el=els[0]
 el.appendChild(div)
 div.onmousedown=function(){
    document.onmousemove=function(ev){resize_div(el,ev);return false}
    document.onmouseup=function(){document.onmousemove=null;document.onmouseup=null}
    return false}
}

function resize_div(obj,e){
e = e || window.event;
 var w=e.clientX-getposOffset(obj,'left'); //для изменения по ширине
 var h=e.clientY-getposOffset(obj,'top');
 if(w>184)obj.style.width=w+'px'; //для изменения по ширине
 if(h>184)obj.style.height=h+'px';
}


}

function drag_object(evt,obj){
        evt = evt || window.event;

        // флаг, которые отвечает за то, что мы кликнули по объекту (готовность к перетаскиванию)
        obj.clicked = true;

        // устанавливаем первоначальные значения координат объекта
        obj.mousePosX = evt.clientX;
        obj.mousePosY = evt.clientY;

        // отключаем обработку событий по умолчанию, связанных с перемещением блока (это убирает глюки с выделением текста в других HTML-блоках, когда мы перемещаем объект)
        if( evt.preventDefault ) evt.preventDefault();
        else evt.returnValue = false;

        // когда мы отпускаем кнопку мыши, убираем «проверочный флаг»
        document.onmouseup = function(){ obj.clicked = false }

        // обработка координат указателя мыши и изменение позиции объекта
        document.onmousemove = function( evt )
        {
                evt = evt || window.event;
                if( obj.clicked )
                {
                        posLeft = !obj.style.left ? obj.offsetLeft : parseInt( obj.style.left );
                        posTop = !obj.style.top ? obj.offsetTop : parseInt( obj.style.top );

                        mousePosX = evt.clientX;
                        mousePosY = evt.clientY;

                        obj.style.left = posLeft + mousePosX - obj.mousePosX + 'px';
                        obj.style.top = posTop + mousePosY - obj.mousePosY + 'px';

                        obj.mousePosX = mousePosX;
                        obj.mousePosY = mousePosY;
                }
        }
 }