У попередньому пості на цю тему ми говорили про те, які є обробники подій для сенсорних пристроїв, а так само властивості об’єкта Event які дозволяють працювати з даними події. Даний пост тісно пов’язаний темою попередньої публікації, і я вирішив зробити його у вигляді продовження. Тут ми розглянемо приклад переміщення елементів, в нашому випадку це блок DIV допомогою сенсора. Реалізувати це справа не складно, можна зробити так, щоб блок переміщався по горизонталі або по вертикалі, не настільки важливо напрямок, скільки можливість реалізувати це.
Приклад роботи скрипта демонструє переміщення блоку по горизонталі (для пристроїв без сенсора в прикладі додана підтримка звичайних курсорів миші).
window.addEventListener. (‘load’, function(){
var box2 = document.getElementById(‘box2’),
boxleft, // положення блоку по лівій стороні
startx, // стартова точка дотику по x
dist = 0, // відстань переміщення точки
touchobj = null // вміст переміщення об’єкта
box2.addEventListener. (‘touchstart’, function(e){
touchobj = e.changedTouches[0] // перша точка дотику для цієї події
boxleft = parseInt(box2.style.left) // положення блоку по лівій стороні
startx = parseInt(touchobj.clientX) // отримання координати по x точки дотику
e.preventDefault() // відключаємо реакцію елементів за замовчуванням у браузері
}, false)
box2.addEventListener. (‘touchmove’, function(e){
touchobj = e.changedTouches[0] // перша точка дотику для цієї події
var dist = parseInt(touchobj.clientX) – startx // підрахунок відстані переміщення
// переміщення блоку від старновой позиції + дистанція
// виставляємо ліміт, щоб блок не виходив за межі від 0 до 380
box2.style.left = ( (boxleft + dist > 380)? 380 : (boxleft + dist < 0)? 0 : boxleft + dist ) + ‘px’
e.preventDefault()
}, false)
}, false)
Поїхали!
Отже, у нас є два блоки #track, він є зовнішнім блоком, і вкладений блок #box2. Зовнішній блок #track є DIV-елементом, він має відносне позиціонування, в той момент як елемент #box2 позиціонується абсолютно. Ми дізнаємося координати початкової позиції по лівій стороні блоку #box2, а так само координати по x точки дотику події touchstart.
При виникненні події touchmove ми обчислюємо відстань, пройдена рухомої точки дотику, отримуючи його положення по x, і віднімаючи з початкової точки переміщення по x. Після цього, щоб блок #box2 рухався в межі встановлених координат, а це від 0 до 380px, ми перевіряємо нижній і верхній межа переміщення. Таким чином, блок рухається по осі, в межах встановлених координат.
Так само є цікава команда характерна для сенсорних пристроїв, називається вона «swipe», і використовується для різних цілей. Про це докладніше ви можете дізнатися у статті, присвяченій цій темі, посилання трохи вище по тексту.
Додав: htmaker, 04.09.2016 р.
(2 голосів, середній: 3,00 з 5)
Завантаження…
Діліться з друзями:
См. також:
Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO
Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript
Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека
Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript
Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript
Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript
Список вибору на JQuery
Рубрика: Html, CSS, Javascript
Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript
Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript
