Подскажите с выбором эллементов
сделал драг энд дроп на сайт(за основу брал этот мануал) есть места в которые при перетягивании обьекта происходит событие, задаю эти места так
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, время: 14:47. |