Перетаскиваемый 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.
-
Создано 28.11.2012 11:12:56
-
Михаил Русаков
Комментарии (16):
В IE 9 Не работает
Ответить
Подправил код, теперь будет работать.
Ответить
Да, половина кода уходит на кроссбраузерность...
Ответить
Добрый день. А как сделать, чтобы нельзя было перетаскивать за рамки сайта? Также, чтобы селекты при нажатии на них перетаскивались вместе с рамкой, а не оставались на месте?
Ответить
Проверять координаты и ставить дополнительные условия.
Ответить
Спасибо! Очень полезно! :)
Ответить
А вы можете рассказать и показать как его закрыть и открыть по клику на на ссылку например... Было бы очень полезно и и интересно
Ответить
Через JavaScript событие click по ссылке, дальше надо использовать display: none; или display: block;
Ответить
А можно div сделать не только перемещеаемым, но и изменяемым по высоте и ширине. Думаю такой код будет весьма полезен для дизайна!
Ответить
а как сделать, чтобы курсор при перетаскивании оставался на блоке, а не уходил от него в сторону?
Ответить
Никак это не сделать. Что очень хорошо, поскольку если ещё через JS можно будет позицией курсора управлять, то это будет ужас просто.
Ответить
Ваш сайт и видеоуроки - кладезь информации в очень доступном изложении. Если много людей приблизительно моего уровня, то он будет полезен очень многим. Когда читаешь перегруженный трудный для восприятия материал, это отпугивает. У Вас очень разумный баланс полезного и доступного.
Ответить
для google chrome получается так: if (browser.indexOf("google Chrome") !=-1) gc= 1 ?
Ответить
Просто "Chrome"
Ответить
Работает отлично. А можно сделать кнопку, которая изменяет расположение DIV, например кнопка " > " влево, кнопка " < " вправо, кнопка 8 без NUM LOCK вверх, 2 вниз, 9 по диагонали и так далее?
Ответить
Честно говоря несмотря на кучу коментариев в коде непонятно ничерта, это рассчитано на тех кто наверное минимум месяцев 6 JS изучал уже, но никак не для начинающих
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.