Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.04.2010, 12:36
Новичок на форуме
Отправить личное сообщение для PHProgress Посмотреть профиль Найти все сообщения от PHProgress
 
Регистрация: 04.04.2010
Сообщений: 4

Определить тэг под перемещаемым контейнером DIV.
Добрый день, написан небольшой Drag and Drop.

Смысл кода в следующем – перемещение контейнеров с классом DragCan из одной ячейки таблицы в другую.

Проблеме в следующем. Когда перемещаешь данный контейнер, и если курсор находиться в его пределах – я не могу определить место для вставки. Метод 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>
Вложения:
Тип файла: txt test3.1.txt (5.0 Кб, 7 просмотров)

Последний раз редактировалось PHProgress, 04.04.2010 в 13:00.
Ответить с цитированием
  #2 (permalink)  
Старый 04.04.2010, 13:38
Новичок на форуме
Отправить личное сообщение для PHProgress Посмотреть профиль Найти все сообщения от PHProgress
 
Регистрация: 04.04.2010
Сообщений: 4

Похожая проблема здесь:
http://xpoint.ru/forums/programming/...ad/42867.xhtml
Ответить с цитированием
  #3 (permalink)  
Старый 05.04.2010, 11:04
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

http://javascript.ru/ui/draganddrop#opuskaem-element
Ответить с цитированием
  #4 (permalink)  
Старый 07.04.2010, 22:19
Новичок на форуме
Отправить личное сообщение для PHProgress Посмотреть профиль Найти все сообщения от PHProgress
 
Регистрация: 04.04.2010
Сообщений: 4

Данным путем мне придеться всю страницу решитить координатами ячеек. Постоянно их менять и обновлять.

Есть ли другой сбособ определить что под слоем?
Ответить с цитированием
  #5 (permalink)  
Старый 08.04.2010, 04:20
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Ээ, а зачем решетить?
http://javascript.ru/ui/draganddrop#...niya-koordinat

Вообще, прежде чем задавать вопрос, следовало бы прочитать всю статью, посвящённую вашей теме.

Последний раз редактировалось Aetae, 08.04.2010 в 04:22. Причина: добавлены нравоучения)
Ответить с цитированием
  #6 (permalink)  
Старый 10.04.2010, 15:04
Новичок на форуме
Отправить личное сообщение для PHProgress Посмотреть профиль Найти все сообщения от PHProgress
 
Регистрация: 04.04.2010
Сообщений: 4

Сообщение от Aetae Посмотреть сообщение
Ээ, а зачем решетить?
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 уже поновому в функции?
Ответить с цитированием
  #7 (permalink)  
Старый 10.04.2010, 19:36
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

По моей ссылке лежит метод получения элемента по позиции, зачем вы извращаетесь?
srcElement - это тот элемент, который вызвал событие и никакой другой, т.е. в случае mousemove это обычно document.

P.S. Вы пишите для только ie? Нигде больше этот код работать не будет.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Можно ли определить адрес ссылки под курсором? PK.Kirill Events/DOM/Window 16 29.05.2008 16:00