<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

В рамках упражнений курса Вы параллельно со мной будете создавать свою большую программу на Java, что даст Вам необходимую практику, после которой для Вас уже не будет разницы, какого размера создавать программы.

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

Подписавшись по 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 изучал уже, но никак не для начинающих

Ответить

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