Close button doesn't work on many Android devices

Issue

This is my code:

function setToTop(t) {
  var n = 0;
  $(".box").each(function(t, o) {
    var e = Number.parseInt($(o).css("z-index"));
    e = Number.isNaN(e) ? 0 : e, n = Math.max(n, e)
  }), t.css({
    zIndex: n + 1
  })
}
$(function() {
  $(document).mouseleave(function() {
    $(document).trigger("mouseup")
  }), $(".box").draggable({
    helper: "original",
    containment: "body",
    drag: function(t, n) {
      n.offset.left < 0 && (n.position.left = n.position.left - n.offset.left)
    },
    stop: function(t, n) {},
    start: function(t, n) {
      setToTop(n.helper)
    }
  })
}), $(".box span").click(function() {
  $(this).parents(".box").css("display", "none")
});

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  font-size: 50px;
  font-family: Arial;
  background-color: rgb(220, 220, 220);
}

.box {
  background-color: yellow;
  color: black;
  padding: 20px;
  display: block;
  position: absolute;
  border: 2px black;
  cursor: all-scroll;
  border: 1px solid black;
}

.box:nth-child(1) {
  left: 20%;
  top: 10%;
}

.box:nth-child(2) {
  left: 10%;
  top: 15%;
}

.box:nth-child(3) {
  left: 25%;
  top: 30%;
}

.box:nth-child(4) {
  left: 30%;
  top: 20%;
}

.box span {
  background-color: red;
  color: white;
  position: absolute;
  top: -40px;
  right: -40px;
  padding: 10px;
  cursor: pointer;
  border: 1px solid black;
}

<div class="box">Hello <span>✕</span></div>
<div class="box">Love <span>✕</span></div>
<div class="box">Freedom <span>✕</span></div>
<div class="box">Peace <span>✕</span></div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>

The function is:

• to have draggable boxes
• the currently dragged box gets set on top
• closing a box is possible with the ✕ button

Unfortunately, the ✕ button doesn't work on many touch devices. My research has shown that it works well on Apple devices, but pretty bad on many Android devices.

Has anyone an idea to fix that? Also, does anyone have an idea to optimize the code?

Would be very thankful for help! <3

Solution

Consider the following.

$(function() {
  function setToTop(t) {
    var n = $(".box").length;
    $(".box").each(function(i, el) {
      if (!isNaN($(el).css("z-index"))) {
        n = parseInt($(el).css("z-index"));
      }
    });
    t.css("z-index", n + 1);
    return true;
  }

  $(document).mouseleave(function() {
    $(document).trigger("mouseup");
  });

  $(".box").draggable({
    containment: "body",
    cancel: ".btn",
    start: function(event, ui) {
      setToTop(ui.helper)
    }
  });

  $(".box .btn").click(function() {
    $(this).parents(".box").css("display", "none")
  });
});

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  font-size: 50px;
  font-family: Arial;
  background-color: rgb(220, 220, 220);
}

.box {
  background-color: yellow;
  color: black;
  padding: 20px;
  display: block;
  position: absolute;
  border: 2px black;
  cursor: all-scroll;
  border: 1px solid black;
}

.box:nth-child(1) {
  left: 20%;
  top: 10%;
}

.box:nth-child(2) {
  left: 10%;
  top: 15%;
}

.box:nth-child(3) {
  left: 25%;
  top: 30%;
}

.box:nth-child(4) {
  left: 30%;
  top: 20%;
}

.box span {
  background-color: red;
  color: white;
  position: absolute;
  top: -40px;
  right: -40px;
  padding: 10px;
  cursor: pointer;
  border: 1px solid black;
}

<div class="box">Hello <span class="btn">✕</span></div>
<div class="box">Love <span class="btn">✕</span></div>
<div class="box">Freedom <span class="btn">✕</span></div>
<div class="box">Peace <span class="btn">✕</span></div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>

The cancel method prevents dragging from starting on specified elements.

See More: https://api.jqueryui.com/draggable/#option-cancel

It is not good practice to use the same Variable Names in your code.

Answered By - Twisty