關閉按鈕在許多Android設備上不起作用

這是我的代碼：

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>

功能是：

• 有可拖動的框
• 當前拖動的框被設定在頂部
• 可以使用?按鈕關閉一個盒子

不幸的是，該?按鈕不適用于許多觸摸設備。我的研究表明它在 Apple 設備上運行良好，但在許多 Android 設備上卻相當糟糕。

有沒有人想辦法解決這個問題？另外，有沒有人有優化代碼的想法？

將非常感謝您的幫助！<3

uj5u.com熱心網友回復：

考慮以下。

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

在您的代碼中使用相同的變數名稱不是一個好習慣。

標籤：

上一篇：無論布局如何，如何檢測jQuery中的按鍵？

下一篇：簡單登錄Html，Css登錄如何添加定時器？