Drag'n'drop обработчики событий
Всем привет!
Есть вопросы по 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 ); тоже не работает |
|
Цитата:
Главное понять принцип, а уже потом допиливать решение. 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> |
Цитата:
|
Логику я вроде бы поняла, у меня двигать не получается
по событию onmousedown запоминаем элемент по событию onmousemove приравниваем его координаты к координатам курсора по событию onmouseup сбрасываем элемент у меня не получается приравнять координаты элемента координатам курсора |
Цитата:
элемент по событию 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'; }; |
логику я понимаю, проблема в том, что в мне в браузере элемент тупо с места не сдвинуть)
|
Цитата:
пример, ниже в 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> |
Часовой пояс GMT +3, время: 16:32. |