Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.05.2011, 19:24
Интересующийся
Отправить личное сообщение для htaccess Посмотреть профиль Найти все сообщения от htaccess
 
Регистрация: 20.06.2010
Сообщений: 17

Привязка событий к динамически созданным элементам
Доброго времени суток! Имеется страничка со скриптом :
http://t.pwon.pp.ua/laSearch/window/w1.html
Пишу свои подвижные "окошки", и одно по центру двигается как нужно, а работает так :
Прижимаем ЛКМ(onclick) на кнопке "#" и перемещаем курсор в нужное место, за ним будет двигаться и слой, после того, как клавиша будет отпущена, произойдёт событие onmousedown и слой встанет на месте.
Всё бы ничего, но пытаюсь динамически через цикл добавить слои с подобным содержанием (кнопками и событиями), но всё безуспешно, слои то не цепляются, то бегают и не отцепляются от мышки.

Жду вашей помощи, и прошу оградить от высказываний типа "drag&drop в помощь, не страдай ерундою" и т.д., искал решение долго, не нашёл (google/yandex/javascript.ru - поиск), но увы, либо я такой тупой, что не понял, и нуждаюсь в помощи людей умнейших, либо не там ищу, в общем, прошу вашей помощи.
Ответить с цитированием
  #2 (permalink)  
Старый 10.05.2011, 15:22
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

при создания окошка надо было добавлять обработчик
Ответить с цитированием
  #3 (permalink)  
Старый 10.05.2011, 15:54
Интересующийся
Отправить личное сообщение для htaccess Посмотреть профиль Найти все сообщения от htaccess
 
Регистрация: 20.06.2010
Сообщений: 17

Сообщение от melky Посмотреть сообщение
при создания окошка надо было добавлять обработчик
Весь смысл в том, что не добавляется, либо я не правильно это делаю, подскажите код добавления.
Я делаю это так :
function addWin() {
	for (var i=1;i<4;i++) {
		var eleOne 	= document.createElement('div');
		nameD	= 'div'+i;
		eleOne.id	= nameD;
		eleOne.style.backgroundColor	= '#CCF';
		eleOne.style.width	= '300px';
		eleOne.style.height	= '200px';
		eleOne.style.left	= '0'+i*2+'px';
		eleOne.style.top	= '0'+i*2+'px';
		eleOne.style.position			= 'absolute';
		eleOne.style.zIndex	= '4'+i;
		document.body.appendChild(eleOne);
		//
		eleTwo	= document.createElement('input');
		nameG		= 'inp'+i;
		eleTwo.id	= nameG;
		eleTwo.className	= 'rDnD';
		eleTwo.type	= 'button';
		eleTwo.value= '#';
		eleTwo.addEventListener('click', function () {
		move_am('lol', nameD);
		}, false);
		eleTwo.addEventListener('mousedown', function () {
		move_am('ask', nameD);
		}, false);
		eleOne.appendChild(eleTwo);
		eleOne	= null;
		eleTwo	= null;
	}
}


И увы, не работает
Ответить с цитированием
  #4 (permalink)  
Старый 10.05.2011, 17:37
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

там все хорошо

созданные через кнопку окошки перетаскиваются

перемещение инициализаруется при клике, а это кончается после зажатия мышки на элементе

т.е. я хочу сказать,ваш код рабочий, синтаксических ошибок нет

ошибка тут, насчет ивента. это строки 21-26. подчеркнутое

замените click на mousedown, а нижний mousedown на mouseup
eleTwo.addEventListener(*!*'click'*/!*, function () {
		move_am('lol', nameD);
		}, false);

		eleTwo.addEventListener(*!*'mousedown'*/!*, function () {
		move_am('ask', nameD);
		}, false);
Ответить с цитированием
  #5 (permalink)  
Старый 10.05.2011, 22:13
Интересующийся
Отправить личное сообщение для htaccess Посмотреть профиль Найти все сообщения от htaccess
 
Регистрация: 20.06.2010
Сообщений: 17

Спасибо, а у меня не двигаются остальные, кроме серого и самого последнего созданного в циклу, который ближе. При попытке перетащить любой другой слой, тащится самый последний, который был создан в цикле к курсору мыши( И firebug говорит, что изменение отступов происходит у самого последнего слоя, хотя кликаю на самом первом.
http://t.pwon.pp.ua/laSearch/window/w1.html
Ответить с цитированием
  #6 (permalink)  
Старый 10.05.2011, 22:36
Интересующийся
Отправить личное сообщение для htaccess Посмотреть профиль Найти все сообщения от htaccess
 
Регистрация: 20.06.2010
Сообщений: 17

Всё заработало, когда изменил на this.parentNode.id
Решил, чтобы кнопка отправляла ай ди своего родителя, а не заранее написанный его же ай ди.
Спасибо большое, что ответили и помогли, но, думаю скоро опять появятся вопросы) Ещё раз спасибо!
eleTwo.addEventListener('mousedown', function () {
		move_am('go', this.parentNode.id);
		}, false);
		eleTwo.addEventListener('mouseup', function () {
		move_am('ask', this.parentNode.id);

Последний раз редактировалось htaccess, 10.05.2011 в 23:13.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обработка событий на динамически созданных объектах Alexey_R jQuery 28 15.02.2017 15:28
Неправильное присвоение элементам событий maxagg Events/DOM/Window 2 19.09.2010 12:58