отключения стилей при drag&drop
 

Приветствую всех. Люди подскажите как при событие drag&drop отключать все стили у объекта, а лучше вообще оставить лишь один контур его чтобы было видно куда перемещать. Дело в том что у объекта масса всяких стилей CSS навешано и при перемещение это все дергается и процессор к тому же грузит хорошо. Делал dispaly="none" перед перемещением и display="block" при отпускание кнопки мыши, перемещение работает все ок, процессор вообще не грузит, объект появляется в нужных координатах при отпускания кнопки мыши...но вот проблема в том что при таком методе не видно что двигаешь, так как объект полностью пропадает, как мне можно это дело решить, кто может помочь? :help:

Вам это нужно, наверное:
http://javascript.ru/ui/draganddrop#...obekt-perenosa

Спасибо, помогло. Теперь работает как часы. У меня еще вопрос есть...
Я делаю модальное окно, перемещать его я могу, но вот как растягивать его не понимаю, вернее не знаю как навесить события по четырем краям объекта, плюс еще углы...вот как можно это реализовать?

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

далее просто назначаете обработчики mounsedown (старт ресайза) и mouseup (стоп ресайза).

Интересная мысль., возьму на вооружения...а без картинок ни как? Я вот тут тоже придумал одну вещь...что если написать скрипт который будет обрабатывать положения курсора относительно объекта при срабатывания события, тем самым можно вычислить на каком крае объекта находиться курсор и далее уже принимать решения куда растягивать объект...как думаете такое будет работать?

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

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% по сравнению с теми действиями при включенном позиционирование... не ужели при перемещения объекта этот код тоже все время отрабатывается? :blink:

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

без картинок делать стрелки можно и нужно. делается это с помощью манипуляций с border (css)
отличный туториал по этой теме