VPF::Прилипание и Drag&Drop - Форум программистов

Sectoid

Дата 29.3.2010, 12:16 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 36
Регистрация: 18.2.2010

Репутация: нет
Всего: нет

Код


<HTML>
<HEAD>
<style type="text/css"> 
#txt1 {
 position: absolute; /* Абсолютное позиционирование */
 left: 350px; /* Положение левого края */
 top: 50px; /* Положение верхнего края */
 width: 220px; /* Ширина слоя */
 background: #e0e0e0; /* Цвет фона */
 border: solid 1px #000; /* Параметры рамки */
}
#txt2 {
 position: absolute; /* Абсолютное позиционирование */
 left: 350px; /* Положение левого края */
 top: 70px; /* Положение верхнего края */
 width: 220px; /* Ширина слоя */
 background: #e0e0e0; /* Цвет фона */
 border: solid 1px #000; /* Параметры рамки */
}
#txt3 {
 position: absolute; /* Абсолютное позиционирование */
 left: 350px; /* Положение левого края */
 top: 90px; /* Положение верхнего края */
 width: 220px; /* Ширина слоя */
 background: #e0e0e0; /* Цвет фона */
 border: solid 1px #000; /* Параметры рамки */
}
#txt4 {
 position: absolute; /* Абсолютное позиционирование */
 left: 350px; /* Положение левого края */
 top: 110px; /* Положение верхнего края */
 width: 220px; /* Ширина слоя */
 background: #e0e0e0; /* Цвет фона */
 border: solid 1px #000; /* Параметры рамки */
}
#txt5 {
 position: absolute; /* Абсолютное позиционирование */
 left: 350px; /* Положение левого края */
 top: 130px; /* Положение верхнего края */
 width: 220px; /* Ширина слоя */
 background: #e0e0e0; /* Цвет фона */
 border: solid 1px #000; /* Параметры рамки */
}
#txt6 {
 position: absolute; /* Абсолютное позиционирование */
 left: 350px; /* Положение левого края */
 top: 150px; /* Положение верхнего края */
 width: 220px; /* Ширина слоя */
 background: #e0e0e0; /* Цвет фона */
 border: solid 1px #000; /* Параметры рамки */
}
#txt7 {
 position: absolute; /* Абсолютное позиционирование */
 left: 350px; /* Положение левого края */
 top: 170px; /* Положение верхнего края */
 width: 220px; /* Ширина слоя */
 background: #e0e0e0; /* Цвет фона */
 border: solid 1px #000; /* Параметры рамки */
}
#pusto1 {
 position: absolute;
 cursor: hand;
 Left: 400px;
 Top: 250px;
}
#pusto2 {
 position: absolute;
 cursor: hand;
 Left: 400px;
 Top: 300px;
}
#pusto3 {
 position: absolute;
 cursor: hand;
 Left: 400px;
 Top: 350px;
}
#pusto4 {
 position: absolute;
 cursor: hand;
 Left: 500px;
 Top: 250px;
}
#pusto5 {
 position: absolute;
 cursor: hand;
 Left: 500px;
 Top: 300px;
}
#pusto6 {
 position: absolute;
 cursor: hand;
 Left: 500px;
 Top: 350px;
}
#pusto7 {
 position: absolute;
 cursor: hand;
 Left: 600px;
 Top: 250px;
}
#pusto8 {
 position: absolute;
 cursor: hand;
 Left: 600px;
 Top: 300px;
}
#pusto9 {
 position: absolute;
 cursor: hand;
 Left: 600px;
 Top: 350px;
}
#i2 {
 position: absolute;
 cursor: hand;
 Left: 401px;
 Top: 351px;
}
#i3 {
 position: absolute;
 cursor: hand;
 Left: 401px;
 Top: 301px;
}
#i4 {
 position: absolute;
 cursor: hand;
 Left: 401px;
 Top: 251px;
}
#i5 {
 position: absolute;
 cursor: hand;
 Left: 300px;
 Top: 350px;
}
</style>
<TITLE></TITLE>

<script LANGUAGE="JavaScript">
var X,Y;
var MassX=new Array('401px','401px','401px')
var MassY=new Array('251px','301px','351px')
var MassZ=new Array(1,2,3)

function MoveObject()
{
if(window.dragObj)
  {
  window.dragObj.style.left=event.x-window.dx;
  window.dragObj.style.top=event.y-window.dy;
// X Блока
  X=window.dragObj.style.left;
// Y Блока
  Y=window.dragObj.style.top;
    
  document.all.text1.value=X;
  document.all.text2.value=Y;

  if(X>'400px' && X<'480px')
     {
     if(Y>'250px' && Y<'290px')
       {
       window.dragObj.style.left=MassX[0];
       window.dragObj.style.top=MassY[0];
       }
     }
   if(X>'400px' && X<'480px')
     {
     if(Y>'300px' && Y<'340px')
       {
       window.dragObj.style.left=MassX[1];
       window.dragObj.style.top=MassY[1];
       }
     }    
    if(X>'400px' && X<'480px')
     {
     if(Y>'330px' && Y<'370px')
       {
       window.dragObj.style.left=MassX[2];
       window.dragObj.style.top=MassY[2];
       } 
     }
   }
}

</SCRIPT>
<BODY onmouseup="window.dragObj=null" onmousemove="MoveObject()">
<P><INPUT type="text" id="txt1" name="text1"></P>
<P><INPUT type="text" id="txt2" name="text2"></P>
<P><INPUT type="text" id="txt3" name="text3"></P>
<P><INPUT type="text" id="txt4" name="text4"></P>
<P><INPUT type="text" id="txt5" name="text5"></P>
<P><INPUT type="text" id="txt6" name="text6"></P>
<P><INPUT type="text" id="txt7" name="text7"></P>
<IMG id="pusto1" name="img1" src='Images/Empty1.bmp' title='Пусто1'>
<IMG id="pusto2" name="img2" src='Images/Empty1.bmp' title='Пусто2'>
<IMG id="pusto3" name="img3" src='Images/Empty1.bmp' title='Пусто3'>
<IMG id="pusto4" name="img4" src='Images/Empty1.bmp' title='Пусто4'>
<IMG id="pusto5" name="img5" src='Images/Empty1.bmp' title='Пусто5'>
<IMG id="pusto6" name="img6" src='Images/Empty1.bmp' title='Пусто6'>
<IMG id="pusto7" name="img7" src='Images/Empty1.bmp' title='Пусто7'>
<IMG id="pusto8" name="img8" src='Images/Empty1.bmp' title='Пусто8'>
<IMG id="pusto9" name="img9" src='Images/Empty1.bmp' title='Пусто9'>
<IMG id="i2" name="img3" src='Images/Block1.bmp' title='Блок1'
   onmousedown="window.dragObj=this;
                window.dx=event.x-this.offsetLeft;
                window.dy=event.y-this.offsetTop"
   ondragstart="return false">
<IMG id="i3" name="img4" src='Images/Block2.bmp' title='Блок2'
   onmousedown="window.dragObj=this;
                window.dx=event.x-this.offsetLeft;
                window.dy=event.y-this.offsetTop"
   ondragstart="return false">
<IMG id="i4" name="img5" src='Images/Block3.bmp' title='Блок3'
   onmousedown="window.dragObj=this;
                window.dx=event.x-this.offsetLeft;
                window.dy=event.y-this.offsetTop"
   ondragstart="return false">
</BODY>
</HTML>

EmilRegis

Дата 29.3.2010, 13:48 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 306
Регистрация: 21.9.2007

Репутация: 3
Всего: 4

ещё бы не мешало сделать этот код кроссбраузерным

Sectoid

Дата 30.3.2010, 07:01 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 36
Регистрация: 18.2.2010

Репутация: нет
Всего: нет

Проверял в IE работает, в Опере тоже.

EmilRegis

Дата 30.3.2010, 07:45 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 306
Регистрация: 21.9.2007

Репутация: 3
Всего: 4

а FireFox?

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »