Определить тэг под перемещаемым контейнером DIV.
Вложений: 1
Добрый день, написан небольшой Drag and Drop.
Смысл кода в следующем – перемещение контейнеров с классом DragCan из одной ячейки таблицы в другую. :-E Проблеме в следующем. Когда перемещаешь данный контейнер, и если курсор находиться в его пределах – я не могу определить место для вставки. Метод window.event. srcElement.tagName выдает название тэга Div. Т.е. моего контейнера, который мы перемещаем в данный момент. :( Как мне узнать текущий тэг под контейнером с классом DragCan? В приложении файл в формате txt с кодом. ---- <html><head> <script language="JavaScript"> flg = (document.all) ? 0 : 1; var obj, objClone, TMPx, TMPy; function mousedown(ev) { obj = event.srcElement; /* выходим на тэг DIV (SPAN) с классом dragNdrop */ while(!(obj.getAttribute("className") == "dragCan") && obj) obj = obj.parentElement; } function mousemove(ev) { if (obj) { /* Создаем возможность перемещения объекта */ obj.setAttribute ("className", "dragMove"); obj.style.pixelLeft = event.clientX + document.body.scrollLeft - 55; obj.style.pixelTop = event.clientY + document.body.scrollTop - 20; //????????????????????????????????????????7Вот //сзесь - как мне определить имя тэга под перемещаемым контейнером DIV? \n Это можно закоментировать") == false) document.all.DWsInputText.value = " Тэг для вставки " + document.activeElement.below; return false; } } function mouseup() { obj.setAttribute ("className", "dragCan"); switch ( event.srcElement.tagName ) { case 'TD' : event.srcElement.appendChild(obj); break; case 'DIV': event.srcElement.insertAdjacentElement ("beforeBegin", obj ); break; default: alert ("Вставка произошла за пределы поля TD\nВозвращаем элемент на место!"); break; } obj = null; } if (flg) { document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP); } document.onmousedown = mousedown; /* Пользователь начал перетаскивание */ document.onmousemove = mousemove; document.onmouseup = mouseup; /* Пользователь заверши перетаскивание */ </script> <style type="text/css"> /* Класс для объектов, с которомы можно производить перенос */ .dragCan { position: static; width: 150px; background-color: #009966; border: #000000 1px solid; } /* Класс клонированного объекта */ .dragMove { /* z-index: -1; */ cursor: move; position: absolute; width: 150px; color: red; background-color: #efefef; border: #000000 1px dashed; filter: alpha (opacity=50); } </style> </HEAD> <BODY> Текущий тэг<input type="text" id="DWsInputText"> <hr> <table border="4" align="center" height="300" width="1000"> <tr><td colspan="3"> <center><h2>В эту таблицу должна перенестись картинка!</h2></center> </td></tr> <tr><td width="20%"><div class="dragCan" > <b>^. Новые средства безопасности и конфиденциальности позволяют сделать просмотр веб-страниц более безопасным.</b> </div> <div class="dragCan"><b>4. Действия перья.</b> </div> <div class="dragCan"><b>5. Информация была полезной?</b></div></td> <td width="60%"> -- <b>Привет, это тест</b> Без всего <i>Я наклонный текст</i> </td> <td width="20%"> <div class="dragCan"><b>1. Сведения, приведенные в этом разделе справки, относятся к Windows Internet Explorer 8.</b></div> <div class="dragCan"><b>2. Сведения, приведенные в этом разделе справки, относятся к Windows Internet Explorer 8.</b></div> <div class="dragCan"><b>3. Сведения, приведенные в этом разделе справки, относятся к Windows Internet Explorer 8.</b></div> <!-- ‚ б«Ґ¤го饩 бва®зЄҐ Їа®ЇЁиЁвҐ ॠ«млҐ ЇгвЁ, Ј¤Ґ 室пвбп ў иЁ Є авЁЄЁ --> <div class="dragCan" style="cursor: hand; border: #000000 3px solid;"> ильтрация InPrivate предотвращает предостав<br> <img src="http://t3.gstatic.com/images?q=tbn:d3izzojwwt-PmM:http://www.memorial.ru/lists/irkutsk/aeroplans/il76.gif" name="a"><br> Привет. </div> </td></tr> </table> <!-- ‚ б«Ґ¤го饩 бва®зЄҐ Їа®ЇЁиЁвҐ ॠ«млҐ ЇгвЁ, Ј¤Ґ 室пвбп ў иЁ Є авЁЄЁ --> <div class="dragCan" style="cursor: hand; border: #000000 3px solid;"> <table border="1"><tr><td> <img src="http://test1.ru/themes/classic/images/ico/delete.gif"> <img src="drop.gif" style="cursor: move;"> <img src="http://test1.ru/themes/classic/images/ico/edit.gif"> <img src="http://test1.ru/themes/classic/images/ico/delete.gif"> <br> <img src="http://t3.gstatic.com/images?q=tbn:d3izzojwwt-PmM:http://www.memorial.ru/lists/irkutsk/aeroplans/il76.gif" name="a"><br> Привет. </td></tr></table></div> <div class="dragCan"> <img src="drop.gif" style="cursor: move;"><br> Привет. </div> <div class="dragCan"> <img src="drop.gif" style="cursor: move;"><br> <img src="http://t3.gstatic.com/images?q=tbn:d3izzojwwt-PmM:http://www.memorial.ru/lists/irkutsk/aeroplans/il76.gif"><br> </div> <div class="dragCan"> <img src="http://t3.gstatic.com/images?q=tbn:d3izzojwwt-PmM:http://www.memorial.ru/lists/irkutsk/aeroplans/il76.gif"><br> </div> <div class="dragCan"> <img src="http://t3.gstatic.com/images?q=tbn:d3izzojwwt-PmM:http://www.memorial.ru/lists/irkutsk/aeroplans/il76.gif"> Режим просмотра InPrivate позволяет посещать веб-страницы без сохранения истории в Internet Explorer. <table border="1"><tr><td>Тестовая таблица</td></tr></table> Это помогает предотвращать получение посторонними пользователями компьютера информации о посещенных страницах и просмотренном содержимом. Дополнительные сведения см. в разделе Что такое просмотр InPrivate? </div> </body> </html> |
Похожая проблема здесь:
http://xpoint.ru/forums/programming/...ad/42867.xhtml |
|
Данным путем мне придеться всю страницу решитить координатами ячеек. Постоянно их менять и обновлять.
Есть ли другой сбособ определить что под слоем? |
Ээ, а зачем решетить?
http://javascript.ru/ui/draganddrop#...niya-koordinat Вообще, прежде чем задавать вопрос, следовало бы прочитать всю статью, посвящённую вашей теме. |
Цитата:
Временно происходит скрытие объекта по CSS display: none; После восстановление объекта. Но почему-то когда я скрываю объект, он мне определяет event.scrElement все равно скрытый объект, т.е. мой скрытий контейнер DIV. function mousemove(e) { if (obj) { //Если здесь вызвать event.srcElement.tagName - то по идее он должен выводить мой контэйнер т.е. тэг DIV. obj.style.position = "absolute"; obj.style.display = "none"; //Если здесь вызвать event.srcElement.tagName - то по идее он должен выводить уже любой другой тэг, где находиться курсор. document.all.DWsInputText.value = event.srcElement.tagName; //obj.setAttribute ("className", "dragMove"); obj.style.pixelLeft = event.clientX + document.body.scrollLeft - 50; obj.style.pixelTop = event.clientY + document.body.scrollTop - 50; obj.style.display = "block"; return false; } } В чем ошибка. Так понимаю, что event.scrElement - возвращяет ссылку с вызываемой функции. Как мне очистить и вызвать event.scrElement уже поновому в функции? |
По моей ссылке лежит метод получения элемента по позиции, зачем вы извращаетесь?
srcElement - это тот элемент, который вызвал событие и никакой другой, т.е. в случае mousemove это обычно document. P.S. Вы пишите для только ie? Нигде больше этот код работать не будет. |
Часовой пояс GMT +3, время: 13:40. |