Подскажите с выбором эллементов
сделал драг энд дроп на сайт(за основу брал этот мануал) есть места в которые при перетягивании обьекта происходит событие, задаю эти места так
drag.dropplaces(
a = {// настройки для первого место
place : function(){ var a = document.getElementById('dr2'); return a }, // место куда можно бростиь обьект
hover : function(dropplace) { dropplace.style.border = '10px solid #000'; }, // что будет с местом, когда курсом с взятым обьектом навести
hoveroff : function(dropplace) { dropplace.style.border = 'none'; }, // что будет есле курсор с обьект увести с места
drop : function() { alert('1'); } // после того как бросить обьект в место что будет
},
b = {//настройки для второго места
place : function(){ var a = document.getElementById('dr1'); return a },
hover : function(dropplace) { dropplace.style.border = '10px solid #0ff'; },
hoveroff : function(dropplace) { dropplace.style.border = 'none'; },
drop : function() { alert('2'); }
});
таким образом можно создавать любое кол-во мест сбрасывание обьекта со своими настройками, но не могу реализовать такую вешь : есть у меня <div id="container"> <div class="test" id="1">...</div> <div class="test" id="2">...</div> <div class="test" id="3">...</div> <div class="test" id="4">...</div> <div class="test" id="5">...</div> <div class="test" id="6">...</div> ... </div> ряд дивов(местов куда необходимо бросать обьект), их нужно как то по классу или тегу определять, что то типа такого
drag.dropplaces(
a = { // настройки для первого место
place : function(){ var a = document.getElementById('container').getElementsByTagName('div'); return a }, // место куда можно бростиь обьект
hover : function(dropplace) { dropplace.style.border = '10px solid #000'; }, // что будет с местом, когда курсом с взятым обьектом навести
hoveroff : function(dropplace) { dropplace.style.border = 'none'; },// что будет есле курсор с обьект увести с места
drop : function() { alert('1'); }// после того как бросить обьект в место что будет
},
});
но var a = document.getElementById('container').getElementsBy TagName('div'); это не правильно и не работает оно, видь должно выглядить как то так var a = document.getElementById('container').getElementsBy TagName('div')[0], но руками перечислить к примеру 50 тегов или классов, не вариант, на то и создавал ту структуру настроки сброса местов, что бы как человек был)) вот, вообшем подскажите как мне тут поступить??(что бы к обьектам с одниаковым классом или тегов применялись одни настройки) --------- что бы было легче, перефразирую вопрос: как сделать что бы все DOM элемы, с одинаковым классом(или тегом), выполняли одно и тоже действие? пример: при нажатие на элемы с классом class="ARTON", всегда выдавали сообщение alert('вы нажали на элем с классом ARTON') не прибегая к такой конструкции
var elem = document.getElementById('container').getElementsByTagName('div')
var i = 0;
while (elem[i]) {
elem[i].onclick = function () { alert('вы нажали на элем с классом ARTON') }
i++;
}
|
Как вариант, возможно, запускать функцию при нажатии в любое место, с дальнейшей проверкой на чём именно кликнул посетитель.
function doIt (e) {
e = e || window.event;
element = e.target || e.srcElement
if (element.className === "ARTON") {
alert("Вы сделали это. Вы нажали на элемент с классом ARTON.");
}
}
if (document.body.addEventListener) {
document.body.addEventListener("click", doIt);
} else {
document.body.attachEvent("onclick", doIt);
}
|
| Часовой пояс GMT +3, время: 17:09. |