Иногда попадаются сайты с отдельными блоками на странице, которые можно перетаскивать мышью в разные места. Это достаточно интересная и необычная возможность, которая реализуется на JavaScript. И в этой статье я покажу, как делается перетаскиваемый DIV на JavaScript. Давайте не будем лить воду, а сразу рассмотрим прокомментированный код: <div id="block" style="border: 1px solid #000; cursor: move; position: absolute;">Перетащи меня</div> <script type='text/javascript'> /* Определяем тип браузера */ var ie = 0; var op = 0; var ff = 0; var browser = navigator.userAgent; if (browser.indexOf("Opera") != -1) op = 1; else { if (browser.indexOf("MSIE") != -1) ie = 1; else { if (browser.indexOf("Firefox") != -1) ff = 1; } } var block = document.getElementById("block"); delta_x = 0; delta_y = 0; /* Ставим обработчики событий на нажатие и отпускание клавиши мыши */ block.onmousedown = saveXY; if (op || ff) { block.addEventListener("onmousedown", saveXY, false); } document.onmouseup = clearXY; /* При нажатии кнопки мыши попадаем в эту функцию */ function saveXY(obj_event) { /* Получаем текущие координаты курсора */ if (obj_event) { x = obj_event.pageX; y = obj_event.pageY; } else { x = window.event.clientX; y = window.event.clientY; if (ie) { y -= 2; x -= 2; } } /* Узнаём текущие координаты блока */ x_block = block.offsetLeft; y_block = block.offsetTop; /* Узнаём смещение */ delta_x = x_block - x; delta_y = y_block - y; /* При движении курсора устанавливаем вызов функции moveWindow */ document.onmousemove = moveBlock; if (op || ff) document.addEventListener("onmousemove", moveBlock, false); } function clearXY() { document.onmousemove = null; // При отпускании мыши убираем обработку события движения мыши } function moveBlock(obj_event) { /* Получаем новые координаты курсора мыши */ if (obj_event) { x = obj_event.pageX; y = obj_event.pageY; } else { x = window.event.clientX; y = window.event.clientY; if (ie) { y -= 2; x -= 2; } } /* Вычисляем новые координаты блока */ new_x = delta_x + x; new_y = delta_y + y; block.style.top = new_y + "px"; block.style.left = new_x + "px"; } </script> Как видите, это не самый простой код в Вашей жизни, но, тем не менее, его модель абсолютно прозрачна. Вешаем на блок обработчики событий нажатия клавиши мыши и отпускание. Плюс делаем обработку движения мыши, которую отключаем как только отпущена клавиша мыши. В самих же функциях просто смотрим, какие координаты у блока, какие координаты у мыши, и на основании этих данных мы просто перемещаем блок в новое место, меняя свойства top и left. Вот таким способом делаются перетаскиваемые DIV на JavaScript.