Перетаскивание изображения курсором мышки. JavaScript+Jquery+HTML5
В рамках развития проекта «Учет оргтехники в организации в браузере», возникла идея реализовать нанесение расположения единицы ТМЦ прямо на плане помещения. Однако! начнем с малого. Для начала реализовал перемещение некоего изображения курсором мышки в обозначенном квадрате. Пока реализовать смог достаточно просто, только при применении HTML5.
1) Обозначаем в каком квадрате будем двигать наше изображение на экране, используя HTML5 тэг canvas:
|
1 |
<canvas id="mapid" width="700" height="500" style="cursor: move;">У вас не поддерживается canvas. Используйте браузер Chrome,FireFox или IE10+</canvas> |
, присваивая идентификатор mapid, чтобы мы могли найти этот тэг при помощи DOM.
2) Далее подгружаем JavaScript-ом изображение
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// инициализируем карту с организацией по умолчанию var drp=false; // true - если перетаскиваем var pozx=0; var pozy=0; // координаты начала отображения изображения var smx=0; var smy=0; // координаты мыши - нажали на кнопку var emx=0; var emy=0; // координаты мыши - опустили на кнопку var img = new Image(); // создаем изображение (пустое) var ctx = document.getElementById('mapid').getContext('2d'); img.src="files/rs.jpg"; // загружаем некий файл img.onload = function(){ // как загрузится, определяем какую часть изображения выводим на экран if (img.width<$("#mapid").width()) { iw=img.width; ih=img.height; sw=$("#mapid").width(); sh=$("#mapid").height(); } else { iw=$("#mapid").width(); ih=$("#mapid").height(); sw=$("#mapid").width(); sh=$("#mapid").height(); }; ctx.drawImage(img,pozx,pozy,iw,ih,0,0,sw,sh); // выводим на экран }; |
3) Обработка перемещения/нажатия кнопок мышки
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// Событие на нажатие кнопки мыши document.getElementById('mapid').onmousedown= function(e){ smx=e.clientX; smy=e.clientY; drp=true; }; // Событие на опускание кнопки мыши document.getElementById('mapid').onmouseup= function(e){ drp=false; }; document.getElementById('mapid').onmousemove= function(e){ if (drp==true){ emx=e.clientX; emy=e.clientY; pozx=pozx+(smx-emx);pozy=pozy+(smy-emy); // отлавливаем выход за пределы экрана if (pozx<0){pozx=0;};if (pozy<0){pozy=0;}; if (pozx>(img.width-iw)){pozx=img.width-iw;}; if (pozy>(img.height-ih)){pozy=img.height-ih;}; ctx.drawImage(img,pozx,pozy,iw,ih,0,0,sw,sh); }; smx=e.clientX; smy=e.clientY; }; |
Вот собственно пока и все. Посмотреть демо можно ниже:
Отличное решение. Автору спасибо!