понедельник, 24 марта 2008 г.

Drag and Drop

Drag and Drop, при реализации D&D возникает кроссброузерная проблема с событиями, наша задача оптимизировать код, значит использовать как можно меньше условий.
В javascrpit к методам и свойствам обьекта можно обращаться как к ассоциативным массивам, тоесть запись window['alert']('Hello'); будет корректна, значит мы можем сделать предварительную проверку и установку нужных переменных в какойто обьект, затем использовать уже установленные корректные методы и свойства, избегая проверки на совместимость с браузерами.

Следуя всему этому написал такой код:

<script>

(function(){
// Браузер
var browser = {ie:false,opera:false,mozilla:false,safari:false};
browser[/ie/.test(navigator.userAgent.toLowerCase())?'ie':
/mozilla/.test(navigator.userAgent.toLowerCase())?'mozilla':
/opera/.test(navigator.userAgent.toLowerCase())?'opera':''
] = true;

// Назначение имён для свойств обьектов.
var ev = {}
ev.target = browser.ie?'srcElement':'target';
ev.pageY = browser.ie?'clientY':'pageY';
ev.pageX = browser.ie?'clientX':'pageX';
window.ev = ev;
})()
var obj = {};

function startDrag(e){
obj = document.getElementById('wnd');
obj.xoffset = e[ev.pageX] - parseInt(obj.style.left);
obj.yoffset = e[ev.pageY] - parseInt(obj.style.top);
document.onmousemove = draging;
document.onmouseup = endDrag;
}

function draging(e){
e = e||window.event
obj.style.top = e[ev.pageY] - obj.yoffset + "px";
obj.style.left = e[ev.pageX] - obj.xoffset + "px";
}

function endDrag(e){
document.onmousemove = null;
document.onmouseup = null;
}

</script>

4 комментария:

Анонимный комментирует...

спасибо за статью!
было бы замечательно если б еще примерчик выложил

Sun_ua комментирует...

Пожалуйста :).
Если это просто перетягивания одного элемента то в функцию startDrag можно передать id. startDrag(e,id) затем obj = document.getElementById(id);
в элементе же <div id="el_1" onmousenown="startDrag(event,'el_1')">
И будет этот див бегать за твоей мышкой пока не отожмёшь )).
Более серьезных примеров просто милион, набери в гугле drag and drop получишь немеренно всяких вариаций скрипта и областей применения.

Анонимный комментирует...

Расскажите, пожалуйста, зачем так определять координаты курсора?
ev.pageY = browser.ie?'clientY':'pageY';
По-моему, e.clientY работает во всех браузерах. Поправьте меня, если я ошибаюсь.

Анонимный комментирует...

Для кросс-браузерности (в разных браузерах, координаты мыши находятса в разных местах) Посмитри на эти значения в Opera/IE/FF/WebKit.