JSFiddle - React, Tailwind, and code Playground

by evolve2k

HTML

<div data-role="page">
  <div data-role="header" data-position="fixed">
    <h1>Swipe Delete</h1>
  </div>
  <div data-role="content">
    <ul data-role="listview">
      <li>

        <a class='move'>item 1</a>
      </li>
      <li>

        <a class='move'>item 2</a>
      </li>
      <li>

        <a class='move'>item 3</a>
      </li>
      <li>

        <a class='move'>item 4</a>
      </li>
      <li>

        <a class='move'>item 5</a>
      </li>
      <li>

        <a class='move'>item 6</a>
      </li>
      <li>

        <a class='move'>item 7</a>
      </li>
      <li>

        <a class='move'>item 8</a>
      </li>
      <li>

        <a class='move'>item 9</a>
      </li>
      <li>

        <a class='move'>item 10</a>
      </li>
      <li>

        <a class='move'>item 11</a>
      </li>
      <li>

        <a class='move'>item 12</a>
      </li>
      <li>

        <a class='move'>item 13</a>
      </li>
      <li>

        <a class='move'>item 14</a>
      </li>
      <li>

        <a class='move'>item 15</a>
      </li>
      <li>

        <a class='move'>item 1</a>
      </li>
      <li>

        <a class='move'>item 2</a>
      </li>
      <li>

        <a class='move'>item 3</a>
      </li>
      <li>

        <a class='move'>item 4</a>
      </li>
      <li>

        <a class='move'>item 5</a>
      </li>
      <li>

        <a class='move'>item 6</a>
      </li>
      <li>

        <a class='move'>item 7</a>
      </li>
      <li>

        <a class='move'>item 8</a>
      </li>
      <li>

        <a class='move'>item 9</a>
      </li>
      <li>

        <a class='move'>item 10</a>
      </li>
      <li>

        <a class='move'>item 11</a>
      </li>
      <li>

        <a class='move'>item 12</a>
      </li>
      <li>

        <a class='move'>item 13</a>
      </li>
      <li>

        <a class='move'>item 14</a>
      </li>
      <li>

        <a class='move'>item 15</a>
      </li>
    </ul>
  </div>
</div>

JavaScript

var startPos;
var handlingTouch = false;
var itemis;
setTimeout(function() {
  var itemwidth = $(window).width();
  document.addEventListener('touchstart', function(e) {
    // Is this the first finger going down? 

    if (e.touches.length == e.changedTouches.length) {
      startPos = {
        x: e.touches[0].clientX,
        y: e.touches[0].clientY
      };
    }
  });

  document.addEventListener('touchmove', function(e) {
    // If this is the first movement event in a sequence:
    if (startPos) {
      // Is the axis of movement horizontal?
      if (Math.abs(e.changedTouches[0].clientX - startPos.x) > Math.abs(e.changedTouches[0].clientY - startPos.y)) {
        handlingTouch = true;
        e.preventDefault();
        onSwipeStart(e);
      }
      startPos = undefined;
    } else if (handlingTouch) {
      e.preventDefault();
      onSwipeMove(e);
    }
  });

  document.addEventListener('touchend', function(e) {
    if (handlingTouch && e.touches.length == 0) {
      e.preventDefault();
      onSwipeEnd(e);
      handlingTouch = false;
    }
  });



  function slide(x) {

    $(itemis).css({
      transform: "translatex(" + x + "px)"
    })
  }

  var swipeOrigin, x, itempos;

  function onSwipeStart(e) {
    itemis = $(e.target).closest("li").find(".move")
    swipeOrigin = e.touches[0].clientX;
  }

  function onSwipeMove(e) {
    x = e.touches[0].clientX - swipeOrigin;
    slide(x);
  }

  function onSwipeEnd(e) {

    if (x > 35) {
      slide(itemwidth);
      setTimeout(function() {
        $(itemis).slideUp("fast").remove()
      }, 500);

    } else {
      slide(0);

    }
  }
}, 5000);