Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.12.2011, 02:11
Аватар для simple
Профессор
Отправить личное сообщение для simple Посмотреть профиль Найти все сообщения от simple
 
Регистрация: 23.09.2010
Сообщений: 247

отключения стилей при drag&drop
Приветствую всех. Люди подскажите как при событие drag&drop отключать все стили у объекта, а лучше вообще оставить лишь один контур его чтобы было видно куда перемещать. Дело в том что у объекта масса всяких стилей CSS навешано и при перемещение это все дергается и процессор к тому же грузит хорошо. Делал dispaly="none" перед перемещением и display="block" при отпускание кнопки мыши, перемещение работает все ок, процессор вообще не грузит, объект появляется в нужных координатах при отпускания кнопки мыши...но вот проблема в том что при таком методе не видно что двигаешь, так как объект полностью пропадает, как мне можно это дело решить, кто может помочь?
Ответить с цитированием
  #2 (permalink)  
Старый 15.12.2011, 02:19
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

Вам это нужно, наверное:
http://javascript.ru/ui/draganddrop#...obekt-perenosa
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #3 (permalink)  
Старый 15.12.2011, 07:47
Аватар для simple
Профессор
Отправить личное сообщение для simple Посмотреть профиль Найти все сообщения от simple
 
Регистрация: 23.09.2010
Сообщений: 247

Спасибо, помогло. Теперь работает как часы. У меня еще вопрос есть...
Я делаю модальное окно, перемещать его я могу, но вот как растягивать его не понимаю, вернее не знаю как навесить события по четырем краям объекта, плюс еще углы...вот как можно это реализовать?
Ответить с цитированием
  #4 (permalink)  
Старый 15.12.2011, 07:57
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от simple Посмотреть сообщение
вернее не знаю как навесить события по четырем краям объекта, плюс еще углы...вот как можно это реализовать?
присваиваете контейнеру (объекту) относительное позиционирование.раз-ся, это можно сделать и обёртке содержимого.
далее создаёте 4 картинки, присваиваете им абсолютное позиционирование и раскидываете по 4м углам с помощью css. (св-ва top, left).

далее просто назначаете обработчики mounsedown (старт ресайза) и mouseup (стоп ресайза).
Ответить с цитированием
  #5 (permalink)  
Старый 15.12.2011, 09:42
Аватар для simple
Профессор
Отправить личное сообщение для simple Посмотреть профиль Найти все сообщения от simple
 
Регистрация: 23.09.2010
Сообщений: 247

Интересная мысль., возьму на вооружения...а без картинок ни как? Я вот тут тоже придумал одну вещь...что если написать скрипт который будет обрабатывать положения курсора относительно объекта при срабатывания события, тем самым можно вычислить на каком крае объекта находиться курсор и далее уже принимать решения куда растягивать объект...как думаете такое будет работать?
Ответить с цитированием
  #6 (permalink)  
Старый 15.12.2011, 10:01
Аватар для simple
Профессор
Отправить личное сообщение для simple Посмотреть профиль Найти все сообщения от simple
 
Регистрация: 23.09.2010
Сообщений: 247

Нашел одно узкое место в своем скрипте по созданию объекта и его позиционирование на экране

function createShellWindow(width,height,text){
var frame = document.createElement('div');
    frame.className = 'framer';
    frame.style.width = width + 'px';
    frame.style.height = height + 'px';
var header = document.createElement('div');
    header.className = 'header';
    header.onmousedown = function(){ moveObject(event,this.parentNode); }
var title = document.createElement('div');
    title.className = 'title-window';
    title.innerText = text;
    header.appendChild(title);
    frame.appendChild(header);
var close = document.createElement('span');
    close.className = 'button';
    close.innerText = 'x';
    close.onclick = function(){ document.body.removeChild(frame); }
    frame.appendChild(close);
var body = document.createElement('div');
    body.className = 'bodyer';
     body.style.width = (width - 6) + 'px';
     body.style.height = (height - 24) + 'px';
    frame.appendChild(body);
document.body.appendChild(frame);

// позиционируем объект по середине экрана

 pw=window.innerWidth;
 ph=window.innerHeight;
 ew=frame.clientWidth;
 eh=frame.clientHeight;
 frame.style.top=Math.floor(ph/2)-(eh/2)+'px';
 frame.style.left=Math.floor(pw/2)-(ew/2)+'px';
};


Так вот если убрать позиционирование объекта из функции и потом быстро перемещать этот объект по экрану то нагрузка на процессор падает порядком на 10-15% по сравнению с теми действиями при включенном позиционирование... не ужели при перемещения объекта этот код тоже все время отрабатывается?

PS. Понял в чем дело...это не из за позиционирование вовсе, так происходит когда передвигаемый объект попадает на участки другого объекта оказывается.

Последний раз редактировалось simple, 15.12.2011 в 10:21.
Ответить с цитированием
  #7 (permalink)  
Старый 15.12.2011, 19:18
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от simple Посмотреть сообщение
Интересная мысль., возьму на вооружения...а без картинок ни как? Я вот тут тоже придумал одну вещь...что если написать скрипт который будет обрабатывать положения курсора относительно объекта при срабатывания события, тем самым можно вычислить на каком крае объекта находиться курсор и далее уже принимать решения куда растягивать объект...как думаете такое будет работать?
без картинок делать стрелки можно и нужно. делается это с помощью манипуляций с border (css)
отличный туториал по этой теме
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема при воспроизведении аудио при использовании jplayer nemish Events/DOM/Window 0 01.12.2011 16:15
Смена стилей страницы при изменении размера окна браузера goooooch Javascript под браузер 6 19.11.2011 18:49
Изменение стилей при клике на ссылку Avro Элементы интерфейса 2 11.04.2011 19:19
getAllResponseHeaders() и status имеют смысл только при readyState==4? mister_maxim AJAX и COMET 7 27.03.2011 19:08
Теряется event при перемещении объекта (Drag&Drop) seagor Events/DOM/Window 16 25.07.2007 01:28