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 >Hello <span>✕</span></div>
<div >Love <span>✕</span></div>
<div >Freedom <span>✕</span></div>
<div >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

CodePudding user response：

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 >Hello <span >✕</span></div>
<div >Love <span >✕</span></div>
<div >Freedom <span >✕</span></div>
<div >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 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.