Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В. Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Перетаскивание элементов в документе
 
 автор: Kit   (26.09.2006 в 19:04)   письмо автору
 
 

Написал скрипт, реализующий перетаскивание элемента документа.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
    <link rel="stylesheet" type="text/css" href="style.css">
  <title></title>
<script language="JavaScript" type="text/javascript">

function beginDrag(elToDrag, event)
{
// выясняем, где находится перетаскиваемый элемент 
var x = parseInt(elToDrag.style.left);
var y = parseInt(elToDrag.style.top);

// вычисляем расстояние между этой точкой и точкой, где была нажата кнопка мыши
var dX = event.clientX - x;
var dY = event.clientY - y;

document.addEventListener('mousemove', moveHandler, true);
document.addEventListener('mouseup', upHandler, true);

event.stopPropagation();
event.preventDefault();

// Обработчик перехватывающий событие onmousemove. 
// Здесь вычисляются новые координаты элемента
function moveHandler(event)
  {
  // перемещаем элемент к текущей позиции курсора
  elToDrag.style.left = (event.clientX - dX) +'px';
  elToDrag.style.top = (event.clientY - dY) +'px';
  event.stopPropagation();
  }
  
// обработчик перехватывающий событие onmouseup в конце перетаскивания
function upHandler(event)
  {
  // отменяем регистрацию обработчиков
  document.removeEventListener('mouseup', upHandler, true);
  document.removeEventListener('mousemove', moveHandler, true);
  event.stopPropagation();
  }  
}
</script>  
</head>

<body>
<div id="mov" style="position: absolute; left: 100px; top: 100px; width: 100px; 
                      background-color: white; border: solid black;" onmousedown="beginDrag(this, event);">
<p>Можно перетащить этот элемент</p>
</div>
</body>
</html>

Опять же работает только в Опере, а осел выдает ошибку
Объект не поддерживает это свойство или метод
в строке

document.addEventListener('mousemove', moveHandler, true);

Что можно сделать?

   
 
 автор: Kit   (27.09.2006 в 18:12)   письмо автору
 
   для: Kit   (26.09.2006 в 19:04)
 

Может кто-нибудь подсказать?

   
 
 автор: 12345   (27.09.2006 в 19:14)   письмо автору
 
   для: Kit   (27.09.2006 в 18:12)
 

там attachEvent надо (для IE)

   
 
 автор: Kit   (02.10.2006 в 14:41)   письмо автору
 
   для: 12345   (27.09.2006 в 19:14)
 

Все получилось. Спасибо :-)

   
 
 автор: Jakeryf   (25.10.2006 в 20:46)   письмо автору
 
   для: Kit   (02.10.2006 в 14:41)
 

Хотелось бы увидеть доработанный код. plz

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования