Hellswipe
Back to Hell-licensed code
Download hellswipe.js (666 bytes)
Swipe the red box below, left or right. You can configure the drag threshold for swipe. Swiping is possible by mouse or finger. It is allowed to swipe back without lifting the button/finger, but it is not allowed to swipe multiple times the same direction during button/finger down.
Swipe the box
<![CDATA[
<style>
#box { width: 200px; height: 200px; background: red; }
#flex { display: flex; justify-content: space-evenly; align-items: center; }
</style>
<div id="flex">
<span><<< swipe left...</span>
<div id="box"></div>
<span>...swipe right >>></span>
</div>
drag: <input id="drag" readonly><br>
swipe: <input id="swipe" readonly><br>
<script>
var x = 0, type = "unknown";
const dragHandler = (src, d) => {
if(d.s==1) type = "finger";
if(d.s==2) type = "mouse";
if(d.s) x = d.x;
else drag.value = type + " " + (d.x - x);
};
const swipeHandler = (src, d) => {
swipe.value = type + " " + d.x;
};
const settings = {dx: 50, dt: 200};
hellswipe(box, settings, swipeHandler, dragHandler)
</script>
]]>