滑动以删除JavaScript
swipe to delete javascript
本文关键字:JavaScript 删除 更新时间:2023-09-26
我正在研究一个函数,当你向左滑动时,它会删除一个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?
是的,您只需计算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!')
})
*/
如果需要,您只需调整阈值即可。一旦检测到,您只需从 DOM 中删除div。
相关文章:
- 使用javascript删除上传的文件
- javascript删除事件侦听器
- 使用javascript删除元素时出现的问题
- 如何使用javascript删除以前的元素
- Javascript:删除冒号的最后一个字符
- 如何使用jQuery或JavaScript删除链接
- 如何在使用Javascript删除某一行时更新表
- 使用JavaScript删除多个select选项
- JavaScript删除未知侦听器
- JavaScript:删除动态创建的表
- JavaScript删除所有其他元素
- Javascript删除数组中某个位置之后的项
- 仅使用javascript删除多个选定的表行
- Javascript删除字段
- 使用Javascript删除字符串的内容
- JavaScript-删除last();工作不正常
- 使用 JavaScript 删除标签之间的每个空格
- 如何使用 MapReduce/Javascript 删除 riak 中的条目
- 当可见属性设置为 false 时,使用 JavaScript 删除空格
- 正则表达式匹配然后使用Javascript删除