Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.03.2011, 14:56
Интересующийся
Отправить личное сообщение для rawuk Посмотреть профиль Найти все сообщения от rawuk
 
Регистрация: 27.02.2011
Сообщений: 24

Как растянуть элемент
Еще раз здрасте,
какой скрипт поможет, чтобы элементы div могли изменять рамер.(растягиваться) Мышкой. за правый нижний угол.
Ответить с цитированием
  #2 (permalink)  
Старый 02.03.2011, 15:47
Аватар для FINoM
Новичок
Отправить личное сообщение для FINoM Посмотреть профиль Найти все сообщения от FINoM
 
Регистрация: 05.09.2010
Сообщений: 2,298

jQuery UI Resizable
Ответить с цитированием
  #3 (permalink)  
Старый 28.03.2011, 11:36
Аватар для donote
Новичок на форуме
Отправить личное сообщение для donote Посмотреть профиль Найти все сообщения от donote
 
Регистрация: 28.03.2011
Сообщений: 5

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

При этом элемент div тоже создается (изначально не в html)
rezDiv = document.createElement('div');
Ответить с цитированием
  #4 (permalink)  
Старый 28.03.2011, 12:14
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,492

Как как. Ручками. Читай статьи на этом сайте. Либо же используй гугл.
Начни отсюда.
__________________
29375, 35
Ответить с цитированием
  #5 (permalink)  
Старый 28.03.2011, 23:44
Аватар для donote
Новичок на форуме
Отправить личное сообщение для donote Посмотреть профиль Найти все сообщения от donote
 
Регистрация: 28.03.2011
Сообщений: 5

Собрал 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;
                }
        }
 }
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Открытие div блока при первом визите на сайт Nushaba Общие вопросы Javascript 28 20.12.2013 21:24
О наследовании событий, или как корректно его отменить. JCShen Events/DOM/Window 8 09.02.2010 00:00
Как проверить анимируется в данный момент элемент или нет sysya jQuery 2 15.01.2010 00:32
Как перерисовать элемент страницы? Dude Элементы интерфейса 4 26.11.2009 13:39
Как сделать электронный каталог продукции? natarius Серверные языки и технологии 6 24.05.2009 20:56