Drag and Drop, при реализации D&D возникает кроссброузерная проблема с событиями, наша задача оптимизировать код, значит использовать как можно меньше условий.
В javascrpit к методам и свойствам обьекта можно обращаться как к ассоциативным массивам, тоесть запись window['alert']('Hello'); будет корректна, значит мы можем сделать предварительную проверку и установку нужных переменных в какойто обьект, затем использовать уже установленные корректные методы и свойства, избегая проверки на совместимость с браузерами.
Следуя всему этому написал такой код:
В 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 комментария:
спасибо за статью!
было бы замечательно если б еще примерчик выложил
Пожалуйста :).
Если это просто перетягивания одного элемента то в функцию 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.
Отправить комментарий