Drag'n'drop обработчики событий

[zaytsewa]

Всем привет!
Есть вопросы по drag'n'drop.
Установила 3 обработчика событий. Onmousedown, onmousemove, onmouseup.

function mousemove( evt ) { 
var el = evt.srcElement||evt.target;
var state = el.getAttribute("state")
if (state != "moved") return;
// двигаем
X = screenX;
Y = screenY;
}

function mousedown(evt) {
var el = evt.srcElement||evt.target;
var state = el.setAttribute("state", "moved")
}

function mouseup(evt) {
    var el = evt.srcElement || evt.target;
    var state = el.setAttribute("state", "notmoved")
}

<div name='div1' style="background-color:red; border:1px solid black;" width='10px' height='20px'
onmousedown="mousedown(event);"
onmouseup="mouseup(event);"
onmousemove = "mousemove(event)"
state='notmoved'>
sdre
</div>


но почему-то не работает
видимо элемент не двигается, тк onmouseup приходит тольок когда я кликаю и отпускаю на одном и том же месте

Помогите разобраться, плз.

И ещё вопрос с

document.addEventListener( 'onmousemove', mousemove, false );
    document.addEventListener( 'onmousedown', mousedown, false );
    document.addEventListener( 'onMouseUp', mouseup, false );

тоже не работает

[Sweet]

Это по-поводу того, как вешать события. Кстати, событие все же "mouseup", а не "MouseUp".
А это по поводу drag'n'drop вообще.

[monolithed]

А это по поводу drag'n'drop вообще.

на самом деле, там довольно сложно все описано для новичков (по крайней мере, так мне показалось).
Главное понять принцип, а уже потом допиливать решение.

zaytsewa, вот вам пример на скорую руку, разберите и переложите кроссбраузерно на JS без jQuery

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function() {
    var element = $('#move');
    element.mousedown(function(event) {
        var offset =  element.offset(), _event = event;
		
		$(document).bind({
			 mousemove : function(event) {
					element.css({
						left : event.pageX - (_event.pageX - offset.left) + 'px', 
						top : event.pageY- (_event.pageY - offset.top) + 'px'
				});
			  },
			 mouseup : function() {
				$(this).unbind('mousemove');
			 }
		});
		
		event.preventDefault();
    });
});
</script>

<div id="move"></div>

<style type="text/css">
#move {
    background: blue;
    position: absolute;
    width: 60px;
    height: 60px;
}
</style>

[Sweet]

там довольно сложно все описано для новичков

Вообщем, согласен. Но основные моменты понять реально (в частности, логику).

[zaytsewa]

Логику я вроде бы поняла, у меня двигать не получается

по событию onmousedown запоминаем элемент
по событию onmousemove приравниваем его координаты к координатам курсора
по событию onmouseup сбрасываем элемент

у меня не получается приравнять координаты элемента координатам курсора

[monolithed]

у меня не получается приравнять координаты элемента координатам курсора

логика элементарная:

элемент по событию mousemove следует за курсором:

element.style.left = event.pageX;
element.style.top = event.pageY;

однако курсор на элементе всегда расположен в правом верхнем углу.
для этого нужно:

событие в mousedown из координат курсора вычесть площадь элемента:

document.mousedown = function() {
      var cursor_left = event.pageX - element.offsetLeft;
      var cursor_top = event.pageY - element.offsetTop;
};

в итоге нам осталось только из текущих координат курсора вычесть предыдущие выражения:

document.mousemove = function() {
      element.style.left = event.pageX - cursor_left + 'px';
      element.style.top = event.pageX - cursor_top +  'px';
};

[zaytsewa]

логику я понимаю, проблема в том, что в мне в браузере элемент тупо с места не сдвинуть)

[monolithed]

логику я понимаю

значит не понимаете.
пример, ниже в IE ниже 9-й версии работать не будет (если нужно кроссбраузерно допишите сами эти 3 строчки)

<script type="text/javascript">
window.onload = function() {
    var element = document.getElementById('move');

    element.onmousedown = function(event) {
        var left = element.offsetLeft,
            top = element.offsetTop,
            _event = event;
        
        document.onmousemove = function(event) {
            var style = element.style;
            style.left = event.pageX - (_event.pageX - left) + 'px';
            style.top = event.pageY - (_event.pageY - top) + 'px';
        };
    
        document.onmouseup = function() {
            document.onmousemove = null;
        };
   
       return false;
    };
};
</script>

<div id="move"></div>

<style type="text/css">
#move {
    background: blue;
    position: absolute;
    width: 60px;
    height: 60px;
}
</style>