Меню
Что нового?

Определить тэг под перемещаемым контейнером DIV - 2.

PHProgress

Новичок
Определить тэг под перемещаемым контейнером DIV - 2.

Добрый день.

Завершил работу скрипта по переносу объектов.

Задачу определения тэга под переносимым контэйнером решил просто:
через display: none; и display: block (или null);.

Т.е. на время переноса мы прячем переносимый контэйнер и через event.scrElemnt определяю значение.
Скрипт привожу ниже.

Теперь другая проблема. Как исправить баг - проблема в том, что когда
мы переносим объект он начинает моргать.

PHP: 
<head>

<script language="JavaScript"> 
	
var obj, objClone, TMPx, TMPy, tmp2, A, B;



/* Пользователь начал перетаскивание */
document.onmousedown = function () {	
	obj = event.srcElement;

	/* выходим на тэг DIV (SPAN) с классом dragNdrop */
	while(!(obj.getAttribute("className") == "dragCan") && obj)
	obj = obj.parentElement;

	//objClone = obj;
	//obj.removeNode(true);
	obj.style.position 	= "absolute";
};


document.onmousemove = function (){
	
	
	if (obj) 
	{
		switch (obj.style.display)
		{
			
			/* Здесь есть возможность получить то, что надо! */
			case 'block':
		
				obj.style.display = 'none';		
				B = event;
				
			break;
		
		
			/* Если объект спрятан */
			default:	
				
				obj.style.display = 'block';
				A = event.srcElement.tagName;
			
			break;
		
		}
				/* Создаем возможность перемещения объекта */
				//obj.setAttribute ("className", "dragMove");
				obj.style.pixelLeft = B.clientX + document.body.scrollLeft - 50;
				obj.style.pixelTop 	= B.clientY + document.body.scrollTop  - 50;
				
				document.all.DWsInputText.value = A;
				
				
				return false;
	}
};

/* Пользователь заверши перетаскивание */
document.onmouseup = function (){

	alert ("Вставка не работает!  \n  Обновите браузер! \n Тэг для вставки: " + A);
	//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;
};
 
</script>

<style type="text/css">
body
{padding: 0px; margin: 0px;} p {border: #000000 1px solid;}

/* Класс для объектов, 
с которомы можно производить перенос */
.dragCan
{
	display: null;
	position: static;
	width: 150px;
	background-color: #009966; 
	border: #000000 1px solid;
}

/* Класс перемещаемого объекта */
.dragMove
{
	cursor: move;
	position: absolute;
	width: 150px;
	color: red;
	background-color: #ff0000; 
	border: #000000 1px dashed;
	filter: alpha (opacity=50);
}
</style>

</HEAD>
 
 
<BODY>

<center>
<b style="color: red;">Здесь должен появиться <br>активный тэг под контейнером (TD|TABLE|BODY|I|B|IMG и т.д.):</b> <br/>
<textarea type="text" id="DWsInputText" style="text-align: center; width: 100%; height: 100px;"></textarea></center>


<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" id="Lab" style="z-index: 5;"> <b>^. 
 Новые средства безопасности и конфиденциальности 
 <img src="http://t3.gstatic.com/images?q=tbn:d3izzojwwt-PmM:[url]http://www.memorial.ru/lists/irkutsk/aeroplans/il76.gif[/url]" name="a">
 позволяют сделать просмотр веб-страниц более безопасным.</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" style="cursor: hand; border: #000000 3px solid;">
ильтрация InPrivate предотвращает предостав<br>
<img src="http://t3.gstatic.com/images?q=tbn:d3izzojwwt-PmM:[url]http://www.memorial.ru/lists/irkutsk/aeroplans/il76.gif[/url]" 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:[url]http://www.memorial.ru/lists/irkutsk/aeroplans/il76.gif[/url]" 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:[url]http://www.memorial.ru/lists/irkutsk/aeroplans/il76.gif[/url]"><br>
</div>
 
<div class="dragCan">
<img src="http://t3.gstatic.com/images?q=tbn:d3izzojwwt-PmM:[url]http://www.memorial.ru/lists/irkutsk/aeroplans/il76.gif[/url]"><br>
</div>

 

<div class="dragCan">
<img src="http://t3.gstatic.com/images?q=tbn:d3izzojwwt-PmM:[url]http://www.memorial.ru/lists/irkutsk/aeroplans/il76.gif[/url]">
Режим просмотра InPrivate позволяет посещать веб-страницы без сохранения истории в Internet Explorer. 
<table border="1"><tr><td>Тестовая таблица</td></tr></table>
Это помогает предотвращать получение посторонними пользователями компьютера информации о посещенных страницах и просмотренном содержимом. Дополнительные сведения см. в разделе Что такое просмотр InPrivate?
</div>
 

</body>
</html>
 

Mols

Новичок
Эм... а как он может не "моргать" если ему постоянно меняют стиль между display: none; и display: block ?
 
Войдите или зарегистрируйтесь для ответа.
Сверху