Перетаскивание изображения курсором мышки. JavaScript+Jquery+HTML5

В рамках развития проекта «Учет оргтехники в организации в браузере», возникла идея реализовать нанесение расположения единицы ТМЦ прямо на плане помещения. Однако! начнем с малого. Для начала реализовал перемещение некоего изображения курсором мышки в обозначенном квадрате. Пока реализовать смог достаточно просто, только при применении HTML5.

1) Обозначаем в каком квадрате будем двигать наше изображение на экране, используя HTML5 тэг canvas:

, присваивая идентификатор mapid, чтобы мы могли найти этот тэг при помощи DOM.

2) Далее подгружаем JavaScript-ом изображение

3) Обработка перемещения/нажатия кнопок мышки

 

Вот собственно пока и все. Посмотреть демо можно ниже:

У вас не поддерживается canvas. Используйте браузер Chrome,FireFox или IE10+

Один комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.