HTML+CSS+JavaScript

Добрый день, подскажите пожалуйста, что не так пишу, перепробовал уже все ...

Вставляю картинку, т.к. код не проходит

Но почему-то объект перемещается только по горизонтале, а по вертикале не реагирует (

Буду очень благодарен за помощь
Заранее спасибо!

Разместите код текстом, если не сложно (спам-фильтр сейчас вас пропустит).

<div style="width:200px; height:200px; background:#999; position:absolute" onmousedown="move(this)"></div>

<script language="javascript">
function move(div){
document.onmousedown=function(){return false}
div.style.cursor='move';
document.onmousemove=function(e){
x=e.pageX;
y=e.pageY;
left=div.offsetLeft;
top=div.offsetTop;
left=x-left;
top=y-top;
document.onmousemove=function(e){
x=e.pageX;
y=e.pageY;
div.style.top=y-top+'px';
div.style.left=x-left+'px';
}
}
document.onmouseup=function(){
div.style.cursor='auto';
document.onmousedown=function(){}
document.onmousemove=function(){}
}
}
</script>

Заранее спасибо!

Очень хороший пример.

Показывающий, что использовать существующие в DOM имена свойств для имён переменных не просто НЕ НАДО, но и НЕЛЬЗЯ.

<script language="javascript"> function move(div){ document.onmousedown=function(){return false} div.style.cursor='move'; document.onmousemove=function(e){ x=e.pageX; y=e.pageY; left1=div.offsetLeft; top1=div.offsetTop; left1=x-left1; top1=y-top1; document.onmousemove=function(e){ x=e.pageX; y=e.pageY; div.style.top=y-top1+'px'; div.style.left=x-left1+'px'; } } document.onmouseup=function(){ div.style.cursor='auto'; document.onmousedown=function(){} document.onmousemove=function(){} } } </script>

Огромное спасибо! Все заработало...

А подскажите в чем проблема была, т.к. только начал разбираться

Почему по оси X работало а по Y нет ?

то,есть лучше задавать переменные, а не брать глобальные ?

И еще вопрос, а как можно сделать, что бы сохранялись координаты ? т.е. после обновления страницы все оставалось так как оставил пользователь, и все это не хранить в куках! ?!?!
Спасибо

>А подскажите в чем проблема была, т.к. только начал разбираться

В Javascripte нет "просто" переменных, всякая переменная является свойством какого-либо объекта..
Переменная, объявленная как глобальная, является свойством объекта window.
Проверяйте:

<script> var SuperPuper = 'abrakadabra'; //или без var, как у вас с left и top alert (SuperPuper); //выведет abrakadabra alert (window.SuperPuper); //и здесь выведет abrakadabra </script>

-----

>Почему по оси X работало а по Y нет ?

У объекта window существует по умолчанию свойство top (это "верхнее" окно по отношению к текущему во фреймовой структуре), а вот свойства left - не существует.
Вы свои переменные обозвали как left и top. Парсер браузера воспринял left как новую переменную (НОВОЕ свойство объекта window), а вот top - как СТАРОЕ (существующее) свойство объекта window. Поэтому с переменной left парсер работал нормально (так, как вам надо), а вот с top - как с каким-то "верхним" окном, которого не обнаружил.
-----

ВЫВОД: так как все свойства всех объектов можно не знать/не помнить/забыть, ВСЕГДА НАДО имена переменных делать гарантированно не совпадающими с возможными именами свойств. Либо любые цифры добавлять или символ подчеркивания (ни в одном из существующих свойств цифр и подчёркивания нет), либо пользоваться сдвоенными буквами верхнего регистра (таких комбинаций в существующих именах нет).
Сиречь не var top, а var top2, либо var TOp, или var top_
Ну а лучше всего давать оригинальные имена переменным - типа myTop, VerhNiz, PointOfTop...
-----

>как можно сделать, что бы сохранялись координаты ? т.е. после обновления страницы все оставалось так как оставил пользователь, и все это не хранить в куках

Всякое изменение необходимо где-то записать/сохранить, чтобы потом прочитать и отобразить.
Либо на сервере в персональном профиле конкретного пользователя, либо на браузере этого пользователя.
Так что с помощью Javascript - только через куки.

ОГРОМНОЕ СПАСИБО! За качественный, понятный и развернутый ответ!

А почему в IE не перетаскиваются объекты ?
А по поводу хранения информация, я так понял, что если задача стоит не хранить в браузере, то делать все через mysql и там каким-то образом идентифицировать пользователя и затем записывать координаты объектов ?

>А почему в IE не перетаскиваются объекты ?

Потому что:
во-первых, IE до 8-й версии включительно не знает свойств pageX и pageY (с 9-й вроде должен знать, если верить http://msdn.microsoft.com/en-us/library/ff974655%28v=VS.85%29.aspx);
во-вторых. для IE нужно использовать объект window.event, а не переданный функции параметр e.

Окончательно, кроссбраузерный вариант таков:

<script language="javascript"> function move(div){ myBr =  document.onmousedown=function(){return false} div.style.cursor='move'; document.onmousemove=function(e){ e = e || window.event; x=e.pageX || e.clientX; y=e.pageY || e.clientY; left1=div.offsetLeft; top1=div.offsetTop; left1=x-left1; top1=y-top1; document.onmousemove=function(e){ e = e || window.event; x=e.pageX || e.clientX; y=e.pageY || e.clientY; div.style.top=y-top1+'px'; div.style.left=x-left1+'px'; } } document.onmouseup=function(){ div.style.cursor='auto'; document.onmousedown=function(){} document.onmousemove=function(){} } } </script>

-----

>делать все через mysql и там каким-то образом идентифицировать пользователя и затем записывать координаты объектов ?

mysql - один из возможных серверных вариантов.

Спасибо!!!!!!!

А помогите еще, как взять координаты картинки, которую пользователь перетащил в определенное место ?
Что-бы занести потом их в БД
Спасибо!

>как взять координаты картинки, которую пользователь перетащил в определенное место ?

Координаты "картинки" вычисляются в двух этих строках:

div.style.top=y-top1+'px'; div.style.left=x-left1+'px';

Чтобы их "взять", лучше всего запоминать эти значения в глобальных переменных. Вот так:

FinalTop=div.style.top=y-top1+'px'; FinalLeft=div.style.left=x-left1+'px';

-----

>Что-бы занести потом их в БД

Переменные FinalTop и FinalLeft будут меняться во время "перетаскивания" вплоть до отпускания кнопки мыши и в этот момент (отпускание кнопки) надо текущие значения передать серверу (для занесения в БД). Лучше всего для этого подходит технология AJAX - т. е. организация связи страницы с сервером без перезагрузки страницы.

В вашем коде для этого надо сначала создать объект XMLHttpRequest. Делается это в одну строку, кою надо поместить в самое начало скриптового блока (СРАЗУ после <script language="javascript">):

<script language="javascript"> if (navigator.appName == 'Microsoft Internet Explorer')  htReq = new ActiveXObject ('Microsoft.XMLHTTP') else  htReq = new XMLHttpRequest (); function move(div){ ...

Передачу значений (для занесения в БД) надо поместить в следующем месте кода (тоже одна строка):

... document.onmouseup=function(){ htReq.open ('get', 'myfile.php?' + encodeURIComponent (FinalTop +'&' + FinalLeft)); htReq.send (null); div.style.cursor='auto'; ...

myfile.php - здесь имя PHP-файла на сервере, который и будет заносить данные в БД. Это файл вам надо будет сделать и разместить на своём сервере (хосте). Если будут вопросы по PHP-файлу - спрашивайте здесь на форуме PHP http://www.softtime.ru/forum/index.php?id_forum=1

Тогда не реагирует на перемещение...

А возможно это все сделать в одном файле? т.е. сейчас у меня все происходит в одном file.php
а не подключатся через get к другому
>

... >document.onmouseup=function(){ >htReq.open ('get', 'myfile.php?' +  >encodeURIComponent (FinalTop +'&' + FinalLeft)); >htReq.send (null); >div.style.cursor='auto'; >...

И еще, а как брать координаты разных объектов ? Просто у меня несколько картинок, которые перемещаются, и что бы координаты каждой из низ занести в БД

>Тогда не реагирует на перемещение.

КТО ("что") не реагирует и КОГДА ("после чего") не реагирует?
Выражайтесь яснее.
-----

>сейчас у меня все происходит в одном file.php

Увы... похоже, вы очень плохо понимаете механизма работы интернета.
Разъясняю: ваш файл file.php после вызова его из браузера отрабатывает от начала до конца на сервере и в результате работы формирует HTML-код (вместе со скриптовым блоком) и это всё отдаёт браузеру пользователя.
И всё - на этом функции файла file.php завершаются.
Больше он не работает.
СОВСЕМ не работает!

Всё, что происходит на странице (перетаскивание и прочее) - оно происходит в браузере, к файлу file.php это уже НИКАКОГО ОТНОШЕНИЯ НЕ ИМЕЕТ!

А вам надо, чтобы какая-то программа на сервере получила данные из браузера (после каких-то действий пользователя в браузере) и записала их в БД.
Вот эту самую программу (файл, который я обозвал myfile.php) вам и надо разместить на сервере. Программа эта будет только там (на сервере) и работать при её вызове со страницы и НИЧЕГО не будет отдавать назад браузеру.
-----

Ещё раз: Сервер ВСЕГДА всего лишь ОТДАЁТ в браузер HTML-код, т. е. набор символов.
Если этот набор символов хранится на сервере в виде HTML-файла, то сервер отдаёт этот набор символов СРАЗУ.
Если же HTML-код надо сформировать, то создают программу на серверном языке (на PHP, на PERL или на каком-то другом), которая ВСЕГО ЛИШЬ делает этот самый набор символов и отдаёт его браузеру.

Аналогия для усвоения: ВЫ (браузер) можете ПОЙТИ В ПИЦЦЕРИЮ (обратиться на сервер) и купить там уже приготовленную ранее пиццу "на вынос", чтобы съесть её дома.
Но вы можете в той же пиццерии попросить приготовить такую же пиццу при вас. И также унести её домой.
И в том, и в ином случае в результате ВЫ (браузер) получите ПИЦЦУ (HTML-код), как продукт питания. Никакой разницы с точки зрения набора витаминов и питательных веществ в этих двух пиццах НЕТ - сделал её повар при вас (отработала программа на серверном языке) или же она была сделана ранее и лежала в этой же пиццерии ещё до вашего прихода туда (HTML-файл).
Если теперь вам надо дома разогреть эту пиццу - то причём тут повар, который эту пиццу изготовил и вам её продал? Неужели побежите обратно в пиццерию звать повара, чтобы разогрел? Нет, вам нужна МИКРОВОЛНОВКА (другая программа), которая эту операцию разогрева пиццы произведёт.

И ещё раз: постарайтесь понять и запомнить РАЗ и НАВСЕГДА: PHP-файлы работают на сервере, они (чаще всего) вызываются из адресной строки браузера, формируют HTML-код, отдают его браузеру и ОТКЛЮЧАЮТСЯ. Всё, что далее в браузере происходит с этим отданным им HTML-кодом, PHP-файла уже НИКАК НЕ КАСАЕТСЯ (повар продал свою пиццу и тут же забыл и о ней, и о покупателе).
В другом случае (технология AJAX) PHP-файл можно запустить не из адресной строки браузера, а программно - прямо из кода страницы, передать ему какую-то информацию, PHP-файл эту информацию обработает на сервере и - либо вернёт что-либо им сформированное вызывающей странице, либо ничего странице возвращать не будет, а только произведёт какие-то действия на самом сервере (например, запишет обработанные координаты в профиль пользователя в БД, как в вашем случае).

Спасибо за очень подробный ответ. Я имел ввиду что бы создать кнопку на этой же странице, и при нажатии она отслеживала все координтаы элементов на страницы и передавала их в БД, а когда пользователь заходил следующий раз все координаты элементов брались бы из БД и расставлялись на страницы!
Но вариант с AJAX конечно интереснее, и правильнее!! что бы пользователь ничего не нажимал.. а все отсылалось само

Но код исправленный:

<div id="moveme"  style="width: 50px; height: 50px; background: url(img/1.jpg); position:absolute;"  onMouseDown="move(this);"></div> <div id="moveme2"  style="width: 50px; height: 50px; background: url(img/2.jpg); position:absolute;left:63px"  onMouseDown="move(this);"></div> <script language="javascript"> if (navigator.appName == 'Microsoft Internet Explorer')  htReq = new ActiveXObject ('Microsoft.XMLHTTP')  else htReq = new XMLHttpRequest (); function move(div){   document.onmousedown=function(){return false}   div.style.cursor='move';   document.onmousemove=function(e){     x=e.pageX;     y=e.pageY;     var left1=div.offsetLeft;     var top1=div.offsetTop;     left1=x-left1;     top1=y-top1;     document.onmousemove=function(e){       x=e.pageX;       y=e.pageY;       FinalTop=div.style.left=x-left1+'px';       FinalLeft=div.style.top=y-top1+'px';     }   }   document.onmouseup=function(){     htReq.open ('get', 'test.php?' + encodeURIComponent (FinalTop +'&' + FinalLeft));     htReq.send (null);     div.style.cursor='auto';     document.onmousedown=function(){}     document.onmousemove=function(){}   } } </script>

Т.е. сейчас должны передаваться две переменные FinalTop & FinalLeft в файл test.php ?
Правильно я понял?
И как еще указать чтобы передавалось координаты нескольких объектов?
Спасибо.

>код исправленный

Странно вы код "исправили"...
Про кроссбраузерность (чтобы работало и в Эксплорере, о чём сами просили) уже забыли?
Ну да ладно, дело ваше.
-----

>как еще указать чтобы передавалось координаты нескольких объектов?

В каждый момент времени ЗАКАНЧИВАТЬ перетаскивать можно только одну "картинку", которая имеет свой уникальный id. Определяете этот id в момент отпускания кнопки мыши и отсылаете его файлу test.php вместе с координатами картинки. А уже в этом файле разбираете (сплитуете) $_SERVER['QUERY_STRING'] по дескриптору &, и получаете три значения: id картинки и две её координаты. Таким образом у вас будет всё, чтобы сделать нужную запись в БД:

... document.onmouseup=function(e){   e = e || window.event; obj = e.target || e.srcElement;   htReq.open ('get', 'test.php?' + encodeURIComponent (obj.id + '&' + FinalTop +'&' + FinalLeft));   htReq.send (null);   div.style.cursor='auto';  ...

Ну все равно игнорирует мое перемещение (

<div id="moveme"  style="width: 50px; height: 50px; background: url(img/1.jpg); position:absolute;"  onMouseDown="move(this);"></div> <div id="moveme2"  style="width: 50px; height: 50px; background: url(img/2.jpg); position:absolute;left:63px"  onMouseDown="move(this);"></div> <script language="javascript"> if (navigator.appName == 'Microsoft Internet Explorer') htReq = new ActiveXObject ('Microsoft.XMLHTTP') else htReq = new XMLHttpRequest (); function move(div){     document.onmousedown=function(){return false}     div.style.cursor='move';     document.onmousemove=function(e){ e = e || window.event;  x=e.pageX || e.clientX;  y=e.pageY || e.clientY; var left1=div.offsetLeft; var top1=div.offsetTop; left1=x-left1; top1=y-top1; document.onmousemove=function(e){ e = e || window.event;  x=e.pageX || e.clientX;  y=e.pageY || e.clientY; FinalTop=div.style.left=x-left1+'px'; FinalLeft=div.style.top=y-top1+'px'; } } document.onmouseup=function(){   e = e || window.event;   obj = e.target || e.srcElement;   htReq.open ('get', 'test.php?' + encodeURIComponent (FinalTop +'&' + FinalLeft));   htReq.send (null);   div.style.cursor='auto';   document.onmousedown=function(){}     document.onmousemove=function(){}   } } </script>

т.е. что бы указать первый мой элемент я должен ?

...  document.onmouseup=function(e){    e = e || window.event;   obj = e.target || e.srcElement;    htReq.open ('get', 'test.php?' + encodeURIComponent ('moveme' + '&' + FinalTop +'&' + FinalLeft));   htReq.send (null);    div.style.cursor='auto';   ...

Написанная мною функция САМА определяет id картинки.

В каждый момент времени клиент может двигать только ОДНУ картинку. - мышь то у него ОДНА, так ведь?
Соответственно, функция move (), обеспечивающая перемещение картинки, в каждый момент времени запускается в ОДНОМ экземпляре.

В момент отпускания кнопки мыши ("окончание перетаскивания") функция САМА (повторяю - САМА, безо всяких бестолковых maxmsmax'ов) определяет id закончившей перемещение картинки и вызывает файл test.php, которому передаёт этот id и соответствующие ему координаты.

Я написал шесть символов obj.id - именно ЭТИ символы и надо писать в коде. И именно так, как написано мною!

прости, все понятно)
А по поводу вышеприведенного кода ?
Из-за чего не работает перемещение объекта ?

document.onmouseup=function(e){ //это написано мною document.onmouseup=function(){ //а это написано в коде у вас

Найдите отличие!

<script language="javascript"> if (navigator.appName == 'Microsoft Internet Explorer') htReq = new ActiveXObject ('Microsoft.XMLHTTP') else htReq = new XMLHttpRequest (); function move(div){     document.onmousedown=function(){return false}     div.style.cursor='move';     document.onmousemove=function(e){ e = e || window.event;  x=e.pageX || e.clientX;  y=e.pageY || e.clientY; var left1=div.offsetLeft; var top1=div.offsetTop; left1=x-left1; top1=y-top1; document.onmousemove=function(e){ e = e || window.event;  x=e.pageX || e.clientX;  y=e.pageY || e.clientY; FinalTop=div.style.left=x-left1+'px'; FinalLeft=div.style.top=y-top1+'px'; } }     document.onmouseup=function(e){        e = e || window.event; obj = e.target || e.srcElement;        htReq.open ('get', 'test.php?' + encodeURIComponent (obj.id + '&' + FinalTop +'&' + FinalLeft));        htReq.send (null);        div.style.cursor='auto';      document.onmousedown=function(){}     document.onmousemove=function(){}     }     } </script>

Все равно игнорирует перемещение, я думаю что это из за

if (navigator.appName == 'Microsoft Internet Explorer') htReq = new ActiveXObject ('Microsoft.XMLHTTP') else htReq = new XMLHttpRequest ();

Когда коментишь его то все работает, но не срабатывает отпускание объекта)

1. Первую строку исправьте на любой из трёх вариантов:

if (navigator.appName == 'Microsoft Internet Explorer') htReq = new ActiveXObject ('Microsoft.XMLHTTP'); else htReq = new XMLHttpRequest (); //добавьте точку с запятой if (navigator.appName == 'Microsoft Internet Explorer') {htReq = new ActiveXObject ('Microsoft.XMLHTTP')} else htReq = new XMLHttpRequest (); //добавьте фигурные скобки if (navigator.appName == 'Microsoft Internet Explorer') htReq = new ActiveXObject ('Microsoft.XMLHTTP') else htReq = new XMLHttpRequest (); //добавьте перенос строки

-----

2. Три строки переместите, т. е. пропишите ПЕРЕД заключительными двумя фигурными скобками, вот так:

...     document.onmouseup=function(e){        e = e || window.event; obj = e.target || e.srcElement;   /--- htReq.open ('get', 'test.php?' + encodeURIComponent (obj.id + '&' + FinalTop +'&' + FinalLeft));   |    htReq.send (null);   |    div.style.cursor='auto';   |  document.onmousedown=function(){}  |  document.onmousemove=function(){}  |    e = e || window.event; obj = e.target || e.srcElement;   \--> htReq.open ('get', 'test.php?' + encodeURIComponent (obj.id + '&' + FinalTop +'&' + FinalLeft));        htReq.send (null);      }     } </script>

Выражаю большое спасибо, стал уже разбираться )
Все получилось!
Теперь столкнулся с проблемой, как извлекать из БД координаты и присваивать их объекту?!?
т.е. человек заходит идентифицируется по IP и если в базе есть IP и координаты объектов присвоить все координаты - всем объектам!

Спасибо!

echo "<div id=\"moveme\" style=\"width: 50px; height: 50px; background: url(img/1.jpg); position: absolute; top: ".ПЕРЕМЕННАЯ_1_ИЗ_БД."; left: ".ПЕРЕМЕННАЯ_2_ИЗ_БД."\" onMouseDown=\"move(this);\"></div>";

Обе переменных берёте из БД для конкретного ip пользователя и конкретного id картинки.
При отсутствии записей в БД для конкретного ip пользователя ("новый клиент") прописываете начальные ("дефолтные") значения для конкретной картинки.

С начало сравниваю по IP, затем так понимаю что надо както вычислить последнюю дату занесения, и потом взять координаты

$ip=$_SERVER['REMOTE_ADDR'];     $query  =  "SELECT  cor_top, cor_left  FROM  `users` WHERE user_ip='$ip' AND date=???";       $result  =  mysql_query($query)  or  die(mysql_error());           while ($row = mysql_fetch_assoc($result)) { echo "<div id=\"moveme\" style=\"width: 50px; height: 50px; background: url(img/1.jpg); position: absolute; top: ".$row['cor_top']."; left: ".$row['cor_left']."\" onMouseDown=\"move(this);\"></div>"; }

Отсюда возникают вопросы:
1. Как составить запрос, что-бы выбирало последнюю занесенную дату, она заносится в формате 2011-09-26 19:18:42
2. Как указать, что если нет в базе записи, то выводить стандартное место

echo "<div id=\"moveme\" style=\"width: 50px; height: 50px; background: url(img/1.jpg); position: absolute; top: 60px; left: 100px \" onMouseDown=\"move(this);\"></div>";

Не понял - а зачем ЗДЕСЬ вообще дата нужна?
Из БД для конкретного пользователя (определяемого по его IP) в данном случае должны быть использованы ТОЛЬКО записи, связанные с положениями картинок. И эти записи должны быть в ЕДИНСТВЕННОМ экземпляре - вне зависимости от даты. Заносятся ПОСЛЕДНИЕ координаты.

При запросе страницы от нового пользователя СНАЧАЛА создаёте его новый профиль в БД, куда заносите начальные координаты для картинок. И только ЗАТЕМ - как для всех прочих - берёте эти координаты из профиля и вписываете в формирующийся HTML-код.

что-то не понимаю как сделать в базе, что бы заносилась
разные IP разных пользователей, где бы указывались координты объектов

Этот форум посвящен JS+HTML+CSS.
Потому оттранслируйте ниженаписанное сообщение на форумах PHP и MySQL:
http://www.softtime.ru/forum/index.php?id_forum=1
и
http://www.softtime.ru/forum/index.php?id_forum=3
И ждите ответов.

Условия: 1. На странице file.php имеются 10 (20...30) картинок с разными id. 2. С помощью имеющегося JS-скрипта клиент может передвигать эти картинки по странице. 3. С помощью имеющегося JS-скрипта абсолютные координаты картинок в момент окончания их перемещения с помощью технологии AJAX передаются файлу test.php в виде get-строки: id_картинки&top&left Задача: Необходимо сохранить в БД для каждого конкретного клиента (определяемого по IP) координаты перемещённых им картинок таким образом, чтобы при следующем заходе этого клиента на страницу file.php картинки получили те координаты, кои были установлены этим клиентом при последнем его заходе на станицу. Предполагаемое решение: 1. При входе клиента на страницу file.php определяю его IP 2. Если клиент новый (новый IP), то создаю в БД профиль для этого конкретного клиента. В профиль этого нового клиента надо занести набор из 10 (20...30) id's картинок на странице, каждой из которых соответствует две дефолтные координаты. Соответственно, всем картинкам на странице надо сразу дать эти дефолтные координаты. 3. Если клиент "старый" (профиль для этого IP имеется в базе), нужно "вытащить" из БД координаты всех картинок и прописать их в формируемый HTML-код файла file.php. 4. Если клиент будет перетаскивать какие-то картинки, надо, чтобы файл test.php перезаписывал изменения координат в "своём" профиле. Из всего вышеописанного умею только лишь определять IP клиента. Потому ВОПРОСЫ: 1. Как в файле file.php организовать вышеописанный профиль для конкретного IP в БД с записью в него дефолтных координат для каждой картинки? 2. Как в этом же файле file.php обеспечить "вытаскивание" из БД координат каждой картинки для формирования HTML-кода страницы file.php для конкретного IP? 3. Как в файле test.php организовать перезаписывание в БД координат тех картинок, которые клиент будет перетаскивать?

Спасибо Вам что вы есть!
искренне спасибо!

странно начал проверять, и понял что координаты совсем не правильные передаются, намного больше ( а в IE так вообще громадные

<script language="javascript"> if (navigator.appName == 'Microsoft Internet Explorer') htReq = new ActiveXObject ('Microsoft.XMLHTTP')  else htReq = new XMLHttpRequest (); function move(div){     document.onmousedown=function(){return false}     div.style.cursor='move';     document.onmousemove=function(e){ e = e || window.event;  x=e.pageX || e.clientX;  y=e.pageY || e.clientY; var left1=div.offsetLeft; var top1=div.offsetTop; left1=x-left1; top1=y-top1; document.onmousemove=function(e){ e = e || window.event;  x=e.pageX || e.clientX;  y=e.pageY || e.clientY; FinalTop=div.style.left=x-left1+'px'; FinalLeft=div.style.top=y-top1+'px'; } }      document.onmouseup=function(e){       div.style.cursor='auto';       document.onmousedown=function(){}      document.onmousemove=function(){}        e = e || window.event; obj = e.target || e.srcElement;         htReq.open ('get', 'test2.php?' + encodeURIComponent (obj.id + '&' + FinalTop +'&' + FinalLeft));         htReq.send (null);       }      } </script>

1. Инициатива - она наказуема. Если не знаете/не понимаете, то и не пишите.
Кто и когда посоветовал вам приписать var вот сюда?

var left1=div.offsetLeft; var top1=div.offsetTop;

-----

2. Вы это специально? Чтобы всех запутать и самому запутаться?

FinalTop=div.style.left=x-left1+'px'; FinalLeft=div.style.top=y-top1+'px';

-----

3. Передаются не "громадные", а нормальные. Просто амперсанд & инструкцией encodeURIComponent преобразуется в %26. Если вы не знаете о существовании метода iconv () в PHP, то перепишите без этой инструкции:

htReq.open ('get', 'test2.php?' + obj.id + '&' + FinalTop + '&' + FinalLeft);

-----

4. Кроме того, сделайте ещё две вставки (чтобы не передавался "пустой клик"):

... function move(div){     STRT = 1;      document.onmousedown=function(){return false} ...

и

...      document.onmouseup=function(e){       if (!STRT) return;     STRT = 0;     div.style.cursor='auto'; ...