<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Перетаскиваемый DIV на 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.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (16):

lev_100rus lev_100rus 28.11.2012 11:26:11

В IE 9 Не работает

Ответить

Admin Admin 28.11.2012 11:35:18

Подправил код, теперь будет работать.

Ответить

sync.o sync.o 28.11.2012 12:19:14

Да, половина кода уходит на кроссбраузерность...

Ответить

DoKeR DoKeR 28.11.2012 17:45:04

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

Ответить

Admin Admin 28.11.2012 19:43:17

Проверять координаты и ставить дополнительные условия.

Ответить

GendolfWhite GendolfWhite 28.11.2012 19:07:24

Спасибо! Очень полезно! :)

Ответить

malina95 malina95 02.12.2012 04:08:08

А вы можете рассказать и показать как его закрыть и открыть по клику на на ссылку например... Было бы очень полезно и и интересно

Ответить

Admin Admin 02.12.2012 10:31:33

Через JavaScript событие click по ссылке, дальше надо использовать display: none; или display: block;

Ответить

ac-40-6.0 ac-40-6.0 26.01.2013 11:22:18

А можно div сделать не только перемещеаемым, но и изменяемым по высоте и ширине. Думаю такой код будет весьма полезен для дизайна!

Ответить

stacey stacey 06.02.2013 14:23:33

а как сделать, чтобы курсор при перетаскивании оставался на блоке, а не уходил от него в сторону?

Ответить

Admin Admin 06.02.2013 18:42:12

Никак это не сделать. Что очень хорошо, поскольку если ещё через JS можно будет позицией курсора управлять, то это будет ужас просто.

Ответить

info333333 info333333 04.06.2013 23:33:22

Ваш сайт и видеоуроки - кладезь информации в очень доступном изложении. Если много людей приблизительно моего уровня, то он будет полезен очень многим. Когда читаешь перегруженный трудный для восприятия материал, это отпугивает. У Вас очень разумный баланс полезного и доступного.

Ответить

MrIlyac MrIlyac 29.07.2013 13:06:31

для google chrome получается так: if (browser.indexOf("google Chrome") !=-1) gc= 1 ?

Ответить

Admin Admin 29.07.2013 20:59:01

Просто "Chrome"

Ответить

1111g 1111g 26.10.2014 12:06:59

Работает отлично. А можно сделать кнопку, которая изменяет расположение DIV, например кнопка " > " влево, кнопка " < " вправо, кнопка 8 без NUM LOCK вверх, 2 вниз, 9 по диагонали и так далее?

Ответить

Aspirinos Aspirinos 20.06.2015 11:52:49

Честно говоря несмотря на кучу коментариев в коде непонятно ничерта, это рассчитано на тех кто наверное минимум месяцев 6 JS изучал уже, но никак не для начинающих

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.