Как сделать свайп js
Обновлено: 03.07.2024
Когда мы строим не просто мобильную версию, а прогрессивное приложение, нам необходимо мобильное меню, которое вызывается свайпом. Обычное, вызываемое по клику, будет неуместно. Люди привыкли, что в приложении можно свайпать. Выдвигать меню слева.
Проблема в том, что в чистом JavaScript, нет обработчика события onswipe. Поэтоу, для распознавания скольжения по экрану, приходится прибегать к разным фремворкам и библиотекам.
То, чем пользовался сам:
Внедряя, к примеру jQuery, сильно увеличивается объем приложения. Для реализации такого простова элемента, как меню, мощности дополнительных библиотек избыточны. Лично я, предпочитаю, не обвешивать сайт излишним кодом.
Responsive menu облегчает жизнь, однако, мне необходимо сделать свайпом не одно а несколько меню. Такоя работа модулю не подвластна.
Остается реализация на чистом JavaScript с обработкой событий ontouchstart, ontouchmove, ontouchend.
Реализация swipe menu на js
Логика простая, два блока стоят рядом.
Когда ширина дисплея соответствует мобильному, первый блок уходит за пределы видимости, за левый край экрана. На рисунке выделено красным.
Делаем прозрачную область, слева, по которой будет производиться свайп.
Меняем свойство css для блока 1, и он перемещается, накладываясь сверху на блок 2, при смахе влево, свойства css меняются и блок 1 возвращаются за область видимости.
Для того чтобы отследить жесты как на мобильном устройстве iPhone или Android или любой другой mobile, проще всего подключить библиотеку jquery.touchSwipe.min.js. Дальше привязываем событие к нужному нам элементу:
Теперь мы можем дополнять наш сайт жестами.
Если нам нужно чтобы событие жест сработал в реальном времени или через определенное количество пикселей пишем такую функцию:
Параметры:
event — стандартный ивент, тут можно посмотреть по какому элементу сработал скрипт
phase
- start — указывает начальную фазу события касания
- move — указывает на событие перемещения
- end — указывает на завершение события
- cancel — указывает на отмену события
direction
- left — указывает на передвижение влево
- right — указывает на передвижение вправо
- up — указывает на передвижение вверх
- down — указывает на передвижение вниз
- in — указывает на событие помещения в обьект
- out — указывает на событие выхода из обьекта
distance — расстояние которое пользователь пролистал
duration — продолжительность пролистывания в миллисекундах
Для одного из проектов, мне понадобилось сделать необычную прокрутку карточек по свайпам, тут оставляю код отвечающие за отлавливание свайпов..
if ( /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i . test ( navigator . userAgent )
| | /1207|6310|6590|3gso|4thp|506i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez(70|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n102|n203|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-(4|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-5|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|51|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i . test ( navigator . userAgent . substr ( 0 , 4 ) ) )
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| // Источник https://web3r.ru/swipe-event |
| /** |
| * Object.assign() polyfill |
| */ |
| Object . assign || Object . defineProperty ( Object , "assign" , < enumerable : ! 1 , configurable : ! 0 , writable : ! 0 , value : function ( a , b ) < "use strict" ; if ( void 0 === a || null === a ) error ( "Cannot convert first argument to object" ) ; for ( var c = Object ( a ) , d = 1 ; d arguments . length ; d ++ ) < var e = arguments [ d ] ; if ( void 0 !== e && null !== e ) for ( var f = Object . keys ( Object ( e ) ) , g = 0 , h = f . length ; g h ; g ++ ) < var i = f [ g ] , j = Object . getOwnPropertyDescriptor ( e , i ) ; void 0 !== j && j . enumerable && ( c [ i ] = e [ i ] ) >> return c > > ) ; |
| /** |
| * CustomEvent() polyfill |
| */ |
| ! function ( ) < if ( "function" == typeof window . CustomEvent ) return ; function t ( t , e ) < e = e || < bubbles : ! 1 , cancelable : ! 1 , detail : void 0 >; var n = document . createEvent ( "CustomEvent" ) ; return n . initCustomEvent ( t , e . bubbles , e . cancelable , e . detail ) , n > t . prototype = window . Event . prototype , window . CustomEvent = t > ( ) ; |
| /** |
| * Функция определения события swipe на элементе. |
| * @param < Object >el - элемент DOM. |
| * @param < Object >settings - объект с предварительными настройками. |
| */ |
| var swipe = function ( el , settings ) |
| // настройки по умолчанию |
| var settings = Object . assign ( < >, |
| minDist : 60 , // минимальная дистанция, которую должен пройти указатель, чтобы жест считался как свайп (px) |
| maxDist : 120 , // максимальная дистанция, не превышая которую может пройти указатель, чтобы жест считался как свайп (px) |
| maxTime : 700 , // максимальное время, за которое должен быть совершен свайп (ms) |
| minTime : 50 // минимальное время, за которое должен быть совершен свайп (ms) |
| > , settings ) ; |
| // коррекция времени при ошибочных значениях |
| if ( settings . maxTime settings . minTime ) settings . maxTime = settings . minTime + 500 ; |
| if ( settings . maxTime 100 || settings . minTime 50 ) |
| settings . maxTime = 700 ; |
| settings . minTime = 50 ; |
| > |
| var dir , // направление свайпа (horizontal, vertical) |
| swipeType , // тип свайпа (up, down, left, right) |
| dist , // дистанция, пройденная указателем |
| isMouse = false , // поддержка мыши (не используется для тач-событий) |
| isMouseDown = false , // указание на активное нажатие мыши (не используется для тач-событий) |
| startX = 0 , // начало координат по оси X (pageX) |
| distX = 0 , // дистанция, пройденная указателем по оси X |
| startY = 0 , // начало координат по оси Y (pageY) |
| distY = 0 , // дистанция, пройденная указателем по оси Y |
| startTime = 0 , // время начала касания |
| support = < // поддерживаемые браузером типы событий |
| pointer : ! ! ( "PointerEvent" in window || ( "msPointerEnabled" in window . navigator ) ) , |
| touch : ! ! ( typeof window . orientation !== "undefined" || / Android | webOS | iPhone | iPad | iPod | BlackBerry | IEMobile | Opera Mini / i . test ( navigator . userAgent ) || "ontouchstart" in window || navigator . msMaxTouchPoints || "maxTouchPoints" in window . navigator > 1 || "msMaxTouchPoints" in window . navigator > 1 ) |
| > ; |
| /** |
| * Опредление доступных в браузере событий: pointer, touch и mouse. |
| * @returns < Object >- возвращает объект с доступными событиями. |
| */ |
| var getSupportedEvents = function ( ) |
| switch ( true ) |
| case support . pointer : |
| events = |
| type : "pointer" , |
| start : "PointerDown" , |
| move : "PointerMove" , |
| end : "PointerUp" , |
| cancel : "PointerCancel" , |
| leave : "PointerLeave" |
| > ; |
| // добавление префиксов для IE10 |
| var ie10 = ( window . navigator . msPointerEnabled && Function ( '/*@cc_on return document.documentMode===10@*/' ) ( ) ) ; |
| for ( var value in events ) |
| if ( value === "type" ) continue ; |
| events [ value ] = ( ie10 ) ? "MS" + events [ value ] : events [ value ] . toLowerCase ( ) ; |
| > |
| break ; |
| case support . touch : |
| events = |
| type : "touch" , |
| start : "touchstart" , |
| move : "touchmove" , |
| end : "touchend" , |
| cancel : "touchcancel" |
| > ; |
| break ; |
| default : |
| events = |
| type : "mouse" , |
| start : "mousedown" , |
| move : "mousemove" , |
| end : "mouseup" , |
| leave : "mouseleave" |
| > ; |
| break ; |
| > |
| return events ; |
| > ; |
| /** |
| * Объединение событий mouse/pointer и touch. |
| * @param e < Event >- принимает в качестве аргумента событие. |
| * @returns < TouchList|Event >- возвращает либо TouchList, либо оставляет событие без изменения. |
| */ |
| var eventsUnify = function ( e ) |
| return e . changedTouches ? e . changedTouches [ 0 ] : e ; |
| > ; |
| /** |
| * Обрабочик начала касания указателем. |
| * @param e < Event >- получает событие. |
| */ |
| var checkStart = function ( e ) |
| var event = eventsUnify ( e ) ; |
| if ( support . touch && typeof e . touches !== "undefined" && e . touches . length !== 1 ) return ; // игнорирование касания несколькими пальцами |
| dir = "none" ; |
| swipeType = "none" ; |
| dist = 0 ; |
| startX = event . pageX ; |
| startY = event . pageY ; |
| startTime = new Date ( ) . getTime ( ) ; |
| if ( isMouse ) isMouseDown = true ; // поддержка мыши |
| > ; |
| /** |
| * Обработчик движения указателя. |
| * @param e < Event >- получает событие. |
| */ |
| var checkMove = function ( e ) |
| if ( isMouse && ! isMouseDown ) return ; // выход из функции, если мышь перестала быть активна во время движения |
| var event = eventsUnify ( e ) ; |
| distX = event . pageX - startX ; |
| distY = event . pageY - startY ; |
| if ( Math . abs ( distX ) > Math . abs ( distY ) ) dir = ( distX 0 ) ? "left" : "right" ; |
| else dir = ( distY 0 ) ? "up" : "down" ; |
| > ; |
| /** |
| * Обработчик окончания касания указателем. |
| * @param e < Event >- получает событие. |
| */ |
| var checkEnd = function ( e ) |
| if ( isMouse && ! isMouseDown ) < // выход из функции и сброс проверки нажатия мыши |
| isMouseDown = false ; |
| return ; |
| > |
| var endTime = new Date ( ) . getTime ( ) ; |
| var time = endTime - startTime ; |
| if ( time >= settings . minTime && time settings . maxTime ) < // проверка времени жеста |
| if ( Math . abs ( distX ) >= settings . minDist && Math . abs ( distY ) settings . maxDist ) |
| swipeType = dir ; // опредление типа свайпа как "left" или "right" |
| > else if ( Math . abs ( distY ) >= settings . minDist && Math . abs ( distX ) settings . maxDist ) |
| swipeType = dir ; // опредление типа свайпа как "top" или "down" |
| > |
| > |
| dist = ( dir === "left" || dir === "right" ) ? Math . abs ( distX ) : Math . abs ( distY ) ; // опредление пройденной указателем дистанции |
| // генерация кастомного события swipe |
| if ( swipeType !== "none" && dist >= settings . minDist ) |
| var swipeEvent = new CustomEvent ( "swipe" , |
| bubbles : true , |
| cancelable : true , |
| detail : |
| full : e , // полное событие Event |
| dir : swipeType , // направление свайпа |
| dist : dist , // дистанция свайпа |
| time : time // время, потраченное на свайп |
| > |
| > ) ; |
| el . dispatchEvent ( swipeEvent ) ; |
| > |
| > ; |
| // добавление поддерживаемых событий |
| var events = getSupportedEvents ( ) ; |
| // проверка наличия мыши |
| if ( ( support . pointer && ! support . touch ) || events . type === "mouse" ) isMouse = true ; |
| // добавление обработчиков на элемент |
| el . addEventListener ( events . start , checkStart ) ; |
| el . addEventListener ( events . move , checkMove ) ; |
| el . addEventListener ( events . end , checkEnd ) ; |
| if ( support . pointer && support . touch ) |
| el . addEventListener ( 'lostpointercapture' , checkEnd ) ; |
| > |
| > ; |
| // элемент |
| var myBlock = document . getElementById ( "menu" ) ; |
| // вызов функции swipe с предварительными настройками |
| swipe ( myBlock , < maxTime : 1000 , minTime : 100 , maxDist : 150 , minDist : 60 >) ; |
| // обработка свайпов |
| myBlock . addEventListener ( "swipe" , function ( ) |
| console . log ( e . detail ) ; |
| > ) ; |
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Читайте также: