Иногда попадаются сайты с отдельными блоками на странице, которые можно перетаскивать мышью в разные места. Это достаточно интересная и необычная возможность, которая реализуется на JavaScript . И в этом материале я покажу, как делается перетаскиваемый DIV на JavaScript .
Иногда попадаются сайты с отдельными блоками на странице, которые можно перетаскивать мышью в разные места. Это достаточно интересная и необычная возможность, которая реализуется на 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.
