DEV Community

Cover image for Creating Swipable Item using Vanilla JS/HTML/CSS
Kaan Kuscu
Kaan Kuscu

Posted on

Creating Swipable Item using Vanilla JS/HTML/CSS

These processes are valid for only mobile. So, touchscreen..

First of all, Let' see the final version.

final

In this topic we are going to only inspect JS side.
This is our final style.css file. First we can create this file.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    background-color: #ddd;
    color: #0d0d0d;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.swipable {
    width: 50%;
    padding: 20px 15px;
    border-radius: 10px;
    background-color: coral;
    color: white;
    box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.8);
    user-select: none;
    margin-top: 20px;
    overflow: hidden;
}

.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: height .5s;
    overflow: hidden;
    padding-bottom: 20px;
}
Enter fullscreen mode Exit fullscreen mode

And it's our index.html file.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Swipable Demo</title>
</head>

<body>

    <div class="container">
        <div class="swipable">This is a swipable item.</div>
        <div class="swipable">This is a swipable item.</div>
        <div class="swipable">This is a swipable item.</div>
        <div class="swipable">This is a swipable item.</div>
        <div class="swipable">This is a swipable item.</div>
        <div class="swipable">This is a swipable item.</div>
        <div class="swipable">This is a swipable item.</div>
    </div>

    <script src="app.js"></script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

These are our Vanilla JS processes.

Before, we can select our .swipable classes on js.

let treshold = window.innerWidth / 4
document.querySelectorAll(".swipable").forEach((swipableItem, index) => {
    //TODO :)
});
Enter fullscreen mode Exit fullscreen mode

In top of our code, we have define treshold variable to setting up swipe treshold.

In this example, our swipable items going to be swipable on only X axis.

We have 3 basis variables for this.

document.querySelectorAll(".swipable").forEach((swipableItem, index) => {
    let touchstartX = 0
    let touchendX = 0
    let diff = 0;
});
Enter fullscreen mode Exit fullscreen mode

diff variable is gonna be result of our drag distance.

Other variables are basically start point and end point of our touches.

swipableItem.addEventListener('touchstart', e => {
        touchstartX = e.changedTouches[0].screenX
        swipableItem.style.transition = "all 0s"
    })
Enter fullscreen mode Exit fullscreen mode

We are listened touchstart event to handling touch event. In this event, we can catch first touch to setting uptouchstartX variable. After then, we are setted up transition duration to 0 second to tracking our touch.

This is our touchend event.

swipableItem.addEventListener('touchmove', e => {
        diff = e.touches[0].screenX - touchstartX;
        swipableItem.style.transform = `translateX(${diff}px)`;
})
Enter fullscreen mode Exit fullscreen mode

In above, we have listened touchmove event. In this event, we have metered distance of between our touchstart and current touch move. And we have assign up this result to diff variable. Thus, so we can adjust the position of our item on the screen by dragging it, only x axis.

This is final of our touch event in bellow.

swipableItem.addEventListener('touchend', e => {
    touchendX = e.changedTouches[0].screenX
    swipableItem.style.transition = "all .5s"

    handleGesture(index)
})
Enter fullscreen mode Exit fullscreen mode

In above, we have set up last position of our finger to touchendX variable.

And set up animation duration to moving to old position slowly, if it's not swiped enough.

handleGesture function is our final function. This function will decide the swipe operation.

And ...

function handleGesture(index) {
    let swipePath = "";
    if (touchendX < touchstartX) swipePath = "left";
    if (touchendX > touchstartX) swipePath = "right";

    if ((diff > treshold) || (diff < -treshold)) {
        console.log(`Item ${index}: Swiped ${swipePath}`)
        swipableItem.style.transition = "all .3s"
        if (swipePath == "left") {
            swipableItem.style.transform = `translateX(-${window.innerWidth}px)`
        } else {
            swipableItem.style.transform = `translateX(${window.innerWidth}px)`
        }
        setInterval(() => {
            swipableItem.style.height = "0px";
            swipableItem.style.padding = "0px";
            swipableItem.style.margin = "0px";
            setInterval(() => {
                swipableItem.remove();
            }, 500);
        }, 500)
    } else {
        swipableItem.style.transform = `translateX(0px)`
    }
}
Enter fullscreen mode Exit fullscreen mode

This is final version.

final

And GitHub Repo

GitHub logo ksckaan1 / dom-swipable-item

this is for my Dev.to topic

Top comments (1)