Перетаскивание элемента
Решил попробовать работать с drag and drop, взяв за основу пример с этой страницы http://learn.javascript.ru/drag-and-drop:
var ball = document.getElementById('ball2');
ball.onmousedown = function() {
this.style.position = 'absolute';
this.style.zIndex = 1000; // над другими элементами
var self = this;
document.onmousemove = function(e) {
e = fixEvent(e);
self.style.left = e.pageX - 25 + 'px';
self.style.top = e.pageY - 25 + 'px';
};
this.onmouseup = function() {
document.onmousemove = self.onmouseup = null;
};
}
ball.ondragstart = function() {
return false;
};
Запускаю и .. ничего не работает. Файрбаг кричит: fixEvent is not defined. Подскажите, что это за функция? Почему о ней не говорится в примере? |
судя по всему, данная функция делает объект событий кроссбраузерным, вот тут можно почитать: http://javascript.ru/tutorial/events/properties
|
kobezzza,
спасибо. Жаль, что в статье сразу об этом не написали. |
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" id="id" alt="" />
<script type="text/javascript">
!function(id, x, y, drag) {
var scroll = {
left: function(event) {
return event.clientX + document.body.scrollLeft;
},
top: function(event) {
return event.clientY + document.body.scrollTop;
}
};
id.style.cssText = "cursor: move; position: absolute; left: 0px; top: 0px";
id.onmousedown = function(event){
event = event || window.event;
x = scroll.left(event) - parseInt(id.style.left);
y = scroll.top(event) - parseInt(id.style.top);
drag = 1;
};
document.onmouseup = function() {
drag = 0;
};
document.onmousemove = function(event) {
event = event || window.event;
if(drag) {
id.style.left = scroll.left(event) - x;
id.style.top = scroll.top(event) - y;
}
};
}(document.getElementById('id'), 0, 0, 0);
</script>
|
| Часовой пояс GMT +3, время: 01:11. |