Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.06.2011, 17:39
Аспирант
Отправить личное сообщение для zaytsewa Посмотреть профиль Найти все сообщения от zaytsewa
 
Регистрация: 09.11.2010
Сообщений: 71

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 );

тоже не работает
Ответить с цитированием
  #2 (permalink)  
Старый 24.06.2011, 17:48
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Это по-поводу того, как вешать события. Кстати, событие все же "mouseup", а не "MouseUp".
А это по поводу drag'n'drop вообще.
Ответить с цитированием
  #3 (permalink)  
Старый 24.06.2011, 18:36
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от Sweet
А это по поводу 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>

Последний раз редактировалось monolithed, 05.09.2011 в 11:40.
Ответить с цитированием
  #4 (permalink)  
Старый 24.06.2011, 18:56
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Сообщение от monolithed
там довольно сложно все описано для новичков
Вообщем, согласен. Но основные моменты понять реально (в частности, логику).
Ответить с цитированием
  #5 (permalink)  
Старый 27.06.2011, 10:37
Аспирант
Отправить личное сообщение для zaytsewa Посмотреть профиль Найти все сообщения от zaytsewa
 
Регистрация: 09.11.2010
Сообщений: 71

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

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

у меня не получается приравнять координаты элемента координатам курсора
Ответить с цитированием
  #6 (permalink)  
Старый 27.06.2011, 12:02
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от zaytsewa
у меня не получается приравнять координаты элемента координатам курсора
логика элементарная:

элемент по событию 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';
};
Ответить с цитированием
  #7 (permalink)  
Старый 27.06.2011, 13:38
Аспирант
Отправить личное сообщение для zaytsewa Посмотреть профиль Найти все сообщения от zaytsewa
 
Регистрация: 09.11.2010
Сообщений: 71

логику я понимаю, проблема в том, что в мне в браузере элемент тупо с места не сдвинуть)
Ответить с цитированием
  #8 (permalink)  
Старый 27.06.2011, 14:32
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от zaytsewa
логику я понимаю
значит не понимаете.
пример, ниже в 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
DOM и обработчики событий radmir4eg Events/DOM/Window 7 31.03.2011 11:52
Скопировать обработчики событий с одного элемента на другой. Jurasmi Events/DOM/Window 3 10.11.2010 19:03
Фильтры IE и обработчики событий IE6 mexoboy Internet Explorer 6 25.05.2010 16:51
Обработчики после ajax-запросов InviS jQuery 2 05.04.2010 14:20
Эмуляция событий мыши и клавиатуры Leax Events/DOM/Window 5 02.04.2010 09:09