VPF::Drag and drop - Форум программистов

check

Дата 19.8.2006, 00:02 (ссылка)

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

Загрузка ...

Опытный

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

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

Вопрос такой: есть DIV в котором выводится сообщение об ошибке(альтернатива традиционному алерту). Я хочу чтобы пользователь имел возможность перетащить этот DIV в удобное ему место.
Как это лучше реализовать?
Вот моя попытка

Код


<style type='text/css'>
  #inval { display:none; position:absolute; left:30%; background-color:#F5DEB3; width:300px; 

height:110px; padding-top:20px;  border:solid #A0522D; }
  #mes { position:relative; top:20%; color:#A0522D; font-weight:bold; text-align:center; }
</style>
<script>
 ...
 ...
 ...
 
var drag = false;

function Drag()
{
  drag  = true;
  BoxId = event.srcElement.id;
}

function MoveBox()
{
  if (drag)
  {
    BoxObj = document.getElementById(BoxId);
    BoxObj.style.top  = event.clientY;
    BoxObj.style.left = event.clientX;
  }
}

function Up()
{
  drag = false;
}
</script>

<body bgcolor='#FFEFD5'>
<h2>Регистрация</h2>
<form name='Reg' action='reg.php' method='post'>
<table>
  <tr><td>Имя</td><td><input type='text' name='name'></td><td rowspan='5' align='top'>
  <div onmousedown='Drag()' onmouseup='Up()'
  onmousemove='MoveBox()' id='inval'>
  <div id='mes'></div>
  </div>
  </td></tr>
 ...
 ...
</table>
</form>
</body>

В принципе, элемент перетаскивается, но очень криво, рывками(и только в IE).

12345c

Дата 19.8.2006, 00:59 (ссылка)

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

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

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

http://js2.ru/example/JsPrimeryCode-56.htm - таскание объектов

Это сообщение отредактировал(а) 12345c - 3.3.2008, 14:31

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

Tony

Дата 19.8.2006, 11:58 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

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

Код


<html>
    <head>
        <script type="text/javascript">
            var click=true;
            var x=0;
            var y=0;
            
            function startMouseMove(e){
                e=window.event||e;
                elem=e.srcElement||e.target;
                elem.style.left=e.clientX-x||e.clientX-x;
                elem.style.top=e.clientY-y||e.clientY-y;
            }
            
            function mouseClick(obj,event){            
                if (click){
                    click=false;
                    x=event.offsetX||event.layerX;
                    y=event.offsetY||event.layerX;
                    obj.onmousemove=startMouseMove;                        
                }else{
                    click=true;
                    obj.onmousemove=null;
                }            
            }
        </script>
    </head>
    <body>
            <div style="width:100px;height:100px;background-color:red;position:absolute" onclick="mouseClick(this,event)"></div>
            <div style="width:100px;height:100px;background-color:blue;position:absolute;top:150px" onclick="mouseClick(this,event)"></div>
    </body>
</html>

--------------------

check

Дата 19.8.2006, 21:03 (ссылка)

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

Загрузка ...

Опытный

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

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

Спасибо, разобрался.

Tony, но твой пример у меня не работает.

check

Дата 19.8.2006, 21:22 (ссылка)

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

Загрузка ...

Опытный

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

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

Tony, странно, один раз он у меня подал признаки жизни, но тут же умер...

Tony

Дата 21.8.2006, 16:26 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

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

У меня в FF(1.5) i IE(6.0) работет. smile

--------------------

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