Вопрос:
Я пытаюсь создать изображение, которое должно работать на мобильных устройствах; Большое изображение содержится внутри элемента контейнера, который его обрезает, пользователь может перетаскивать изображение внутри этого контейнера и зажимать для увеличения.
Функция перетаскивания работает на настольном браузере, но когда я тестирую мобильный браузер (Android-хром, интернет-браузер Android, iphone safari), он работает неправильно: он не плавный или вообще не тянет. Он перемещает только крошечные, очень маленькие кусочки при попытке пронести или коснуться движения.
Были некоторые тесты с сенсорным, touchstart, touchmove без большой удачи:
У меня есть демо в следующей ссылке (http://jsbin.com/cokil/1/). Не уверен, могу ли я получить несколько советов или советов о том, как это сделать?
-
было сообщено, что исходная ссылка github не загружает hammerjs (загружается здесь), поэтому я получил эту другую загрузку с CDN http://jsbin.com/cokil/3/
-
пожалуйста, помните, что проблема связана с мобильными браузерами
Спасибо, что посмотрели!
Лучший ответ:
Ваш jsbin не включает Hammer js правильно. Заменить:
https://raw.github.com/EightMedia/hammer.js/master/hammer.min.js
с
//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.6/hammer.min.js
и ваш скрипт отлично работает.
в скрипте нет необходимости в jQuery. Вы можете использовать собственный DOMContentLoaded и удалить $(document).ready если хотите.
Вам также нужно добавить ‘px’ в конец ваших верхних и левых объявлений
imgEl.style.top = (y + parseFloat(event.gesture.deltaY))+’px’; imgEl.style.left = (x + parseFloat(event.gesture.deltaX))+’px’;
DEMO
Ответ №1
После долгого изучения тишины, слушая, что другие люди говорили об этом и пытаясь сохранить все просто, я придумал следующее решение и надеюсь, что это полезно для кого-то еще в будущем:
document.addEventListener(‘touchstart’, function(event) { event.preventDefault(); var e = new Event(‘dragstart’); element.dispatchEvent(e); }, false); document.addEventListener(‘touchmove’, function(event) { event.preventDefault(); var e = new Event(‘drag’); element.dispatchEvent(e); }, false);
Это работает путем запуска исходного кода, который работает на рабочем столе:
Hammer(element).on(«dragstart», function(event) { imgEl = document.querySelectorAll(«img»)[0]; y = parseFloat(imgEl.style.top) || 0; x = parseFloat(imgEl.style.top) || 0; }); Hammer(element).on(«drag», function(event) { imgEl.style.top = y + parseFloat(event.gesture.deltaY); imgEl.style.left = x + parseFloat(event.gesture.deltaX); });
