06.05.2011, 19:24
|
Интересующийся
|
|
Регистрация: 20.06.2010
Сообщений: 17
|
|
Привязка событий к динамически созданным элементам
Доброго времени суток! Имеется страничка со скриптом :
http://t.pwon.pp.ua/laSearch/window/w1.html
Пишу свои подвижные "окошки", и одно по центру двигается как нужно, а работает так :
Прижимаем ЛКМ(onclick) на кнопке "#" и перемещаем курсор в нужное место, за ним будет двигаться и слой, после того, как клавиша будет отпущена, произойдёт событие onmousedown и слой встанет на месте.
Всё бы ничего, но пытаюсь динамически через цикл добавить слои с подобным содержанием (кнопками и событиями), но всё безуспешно, слои то не цепляются, то бегают и не отцепляются от мышки.
Жду вашей помощи, и прошу оградить от высказываний типа "drag&drop в помощь, не страдай ерундою" и т.д., искал решение долго, не нашёл (google/yandex/javascript.ru - поиск), но увы, либо я такой тупой, что не понял, и нуждаюсь в помощи людей умнейших, либо не там ищу, в общем, прошу вашей помощи.
|
|
10.05.2011, 15:22
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
при создания окошка надо было добавлять обработчик
|
|
10.05.2011, 15:54
|
Интересующийся
|
|
Регистрация: 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;
}
}
И увы, не работает
|
|
10.05.2011, 17:37
|
sinistral
|
|
Регистрация: 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);
|
|
10.05.2011, 22:13
|
Интересующийся
|
|
Регистрация: 20.06.2010
Сообщений: 17
|
|
Спасибо, а у меня не двигаются остальные, кроме серого и самого последнего созданного в циклу, который ближе. При попытке перетащить любой другой слой, тащится самый последний, который был создан в цикле к курсору мыши( И firebug говорит, что изменение отступов происходит у самого последнего слоя, хотя кликаю на самом первом.
http://t.pwon.pp.ua/laSearch/window/w1.html
|
|
10.05.2011, 22:36
|
Интересующийся
|
|
Регистрация: 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.
|
|
|
|