Creating Swipable Item using Vanilla JS/HTML/CSS
Tags: javascript, webdev, html, css
Published: 2022-04-23 22:41:12

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

First of all, Let' see the final version.

![final](https://raw.githubusercontent.com/ksckaan1/dom-swipable-item/master/finalversion.gif)

In this topic we are going to only inspect JS side.
This is our final `style.css` file. First we can create this file.
```css
* {
    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;
}
```
And it's our `index.html` file.
```html
<!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>
```

## These are our Vanilla JS processes.

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

```js
let treshold = window.innerWidth / 4
document.querySelectorAll(".swipable").forEach((swipableItem, index) => {
    //TODO :)
});
```
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.

```js
document.querySelectorAll(".swipable").forEach((swipableItem, index) => {
    let touchstartX = 0
    let touchendX = 0
    let diff = 0;
});
```
`diff` variable is gonna be result of our drag distance.

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

```js
swipableItem.addEventListener('touchstart', e => {
        touchstartX = e.changedTouches[0].screenX
        swipableItem.style.transition = "all 0s"
    })
```
We are listened `touchstart` event to handling touch event. In this event, we can catch first touch to setting up`touchstartX` variable. After then, we are setted up transition duration to 0 second to tracking our touch.

This is our `touchend` event.

```js
swipableItem.addEventListener('touchmove', e => {
        diff = e.touches[0].screenX - touchstartX;
        swipableItem.style.transform = `translateX(${diff}px)`;
})
```
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.

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

    handleGesture(index)
})
```
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 ...
```js
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)`
    }
}
```

This is final version.

![final](https://raw.githubusercontent.com/ksckaan1/dom-swipable-item/master/finalversion.gif)

And GitHub Repo

{% github ksckaan1/dom-swipable-item %}