Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 01.04.2009, 10:42   #1
Ruska882009
Пользователь
 
Регистрация: 13.02.2009
Сообщений: 68
По умолчанию Drag and Drop в JavaScript

Привет Народ!!!!!!!!!!!!!!!!
Помогите пожалуйста, вот код перемещение двух картинок
Код HTML:
var 
  flag=false;
var 
  id_img="";
function drag()
  { 
     flag=!flag;
	 id_img=event.srcElement.id;
  }
function mybody.onmousemove()
  {
	 if (flag)
	   {  
		 document.all[id_img].style.top=event.clientY;
		 document.all[id_img].style.left=event.clientX;
	   }
  }  
function mybody.onmouseup()
  {
	flag=false;
  } 
+++++++++++++++++++++++++++++++++
<html>
  <head> <title>Перемещение изображение</title></head>
  <body id="mybody">
    <script language="javascript" src="dg.js"> </script>
      <img id="myimg"  src="my.png" ondragStart="drag()" style="position:absolute; top:10; left:10">
      <img id="myimg"  src="my2.png" ondragStart="drag()" style="position:absolute; top:100; left:150">
  </body>
</html>
Как сделать так, чтобы когда top второй картинки попадал с низом 1-ой картинки, перемещение прекращалось, ну эти две картинки замораживались, заранее спасибо!!!!!!
Форматируйте код!!! //модератор

Последний раз редактировалось SkyM@n; 01.04.2009 в 10:54.
Ruska882009 вне форума Ответить с цитированием
Старый 02.04.2009, 16:46   #2
RJ Presto
Пользователь
 
Регистрация: 02.04.2009
Сообщений: 17
По умолчанию

если я правильно понял суть проблемы - вот решение

Код HTML:
<html>

<head>
  <title></title>
</head>

<body id='mybody'>

<script>
var
  flag=false;
var
  id_img="";
function drag()
  {
     flag=!flag;
	 id_img=event.srcElement.id;
  }
function mybody.onmousemove()
  {
	 if (flag)
	   {
		 document.getElementById( id_img ).style.top=event.clientY;
		 document.getElementById( id_img ).style.left=event.clientX;

		 if ( document.getElementById( "myimg" + String( Number( id_img.substr( 5 ) ) + 1 ) ) ) {
		 	// "myimg" + String( Number( id_img.substr( 5 ) ) + 1 - id картинки, в конце которой должна остановиться двигаемая
			// в данном случае следующая, т.е. если двигаем myimg1, то она встанет под myimg2
		   	 nextImg = document.getElementById( "myimg" + String( Number( id_img.substr( 5 ) ) + 1 ) );
		   	 // указатель на элемент-картинку
		   	 nextImgTop = String( nextImg.style.top ).substr( 0, String( nextImg.style.top ).indexOf( 'px' ) );
			// её top (обрезаем px с хвоста значения)
		   	 nextAnchor = Number( nextImgTop ) + Number( nextImg.height );
		   	 // и позиция для остановки картинки, которую двигаем
			 if ( Number( event.clientY ) >= Number( nextAnchor ) ) {
			 	// если ниже низа картинки - перестаём перетаскивать и цепляем к низу
				flag = false;
				document.getElementById( id_img ).style.top=Number( nextAnchor );
			 }
		}
	   }

  }
function mybody.onmouseup()
  {
	flag=false;
  }
</script>
      <img id="myimg1"  src="AlbumArtSmall.jpg" ondragStart="drag()" style="position:absolute; top:10; left:10">
      <img id="myimg2"  src="Folder.jpg" ondragStart="drag()" style="position:absolute; top:100; left:150">
</body>

</html>
RJ Presto вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Drag and Drop в JavaScript Ruska882009 JavaScript, Ajax 4 29.08.2009 23:39
Drag and Drop Xardas Общие вопросы Delphi 8 20.01.2008 23:09