проведите пальцем, чтобы удалить javascript

Я работаю над функцией, которая удалит div, когда вы проведете его влево...

Вот div, который я хотел бы удалить при смахивании:

<div class="listItem">Stuff here</div>

У меня есть javascript, чтобы определить, где на странице я провел пальцем, используя прослушиватели событий touchstart и touchend.

Я создал функцию, вызываемую для удаления элемента:

function swipeLeft(){
     //delete item
}

Я определяю, где я прокручиваю, следующим образом:

var touchobj = e.changedTouches[0];
dist = touchobj.pageX - startX

Теперь можно удалить div с этой информацией?


mobile javascript swipe
person Chris Bolton    schedule 06.03.2015    source источник
comment
Ознакомьтесь с этой библиотекой swiped.js для реализации удаления смахиванием. Может быть, это поможет вам   -  person marsh    schedule 26.04.2015

Ответы (1)


arrow_upward
3
arrow_downward

Да, вы просто вычисляете дельты между размерами div и расстоянием прокрутки.

Вот хороший пример общего обнаружения шаблона смахивания:

http://www.javascriptkit.com/javatutors/touchevents2.shtml

Код:

function swipedetect(el, callback){

    var touchsurface = el,
    swipedir,
    startX,
    startY,
    distX,
    distY,
    threshold = 150, //required min distance traveled to be considered swipe
    restraint = 100, // maximum distance allowed at the same time in perpendicular direction
    allowedTime = 300, // maximum time allowed to travel that distance
    elapsedTime,
    startTime,
    handleswipe = callback || function(swipedir){}

    touchsurface.addEventListener('touchstart', function(e){
        var touchobj = e.changedTouches[0]
        swipedir = 'none'
        dist = 0
        startX = touchobj.pageX
        startY = touchobj.pageY
        startTime = new Date().getTime() // record time when finger first makes contact with surface
        e.preventDefault()
    }, false)

    touchsurface.addEventListener('touchmove', function(e){
        e.preventDefault() // prevent scrolling when inside DIV
    }, false)

    touchsurface.addEventListener('touchend', function(e){
        var touchobj = e.changedTouches[0]
        distX = touchobj.pageX - startX // get horizontal dist traveled by finger while in contact with surface
        distY = touchobj.pageY - startY // get vertical dist traveled by finger while in contact with surface
        elapsedTime = new Date().getTime() - startTime // get time elapsed
        if (elapsedTime <= allowedTime){ // first condition for awipe met
            if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint){ // 2nd condition for horizontal swipe met
                swipedir = (distX < 0)? 'left' : 'right' // if dist traveled is negative, it indicates left swipe
            }
            else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint){ // 2nd condition for vertical swipe met
                swipedir = (distY < 0)? 'up' : 'down' // if dist traveled is negative, it indicates up swipe
            }
        }
        handleswipe(swipedir)
        e.preventDefault()
    }, false)
}

//USAGE:
/*
var el = document.getElementById('someel')
swipedetect(el, function(swipedir){
    swipedir contains either "none", "left", "right", "top", or "down"
    if (swipedir =='left')
        alert('You just swiped left!')
})
*/

Все, что вам нужно сделать, это настроить порог, если вам нужно. После обнаружения вы просто удаляете div из DOM.

person flyandi    schedule 06.03.2015