关闭按钮在许多Android设备上不起作用

Question

这是我的密码：

​

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>

​

其职能是：

• 有可拖动的框
• 当前拖动的框设置在
• 顶部，关闭一个框是可以使用✕按钮

的

不幸的是，✕按钮不能在许多触摸设备上工作。我的研究表明，它在苹果设备上运行良好，但在许多Android设备上却非常糟糕。

有人想办法解决这个问题吗？另外，有人有优化代码的想法吗？

非常感谢你的帮助！

Answer 1

请考虑以下几点。

​

$(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>

​

cancel方法防止在指定元素上开始拖动。

见更多信息：https://api.jqueryui.com/draggable/#option-cancel

在代码中使用相同的变量名并不是很好的做法。