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