我正在使用 touch-punch jquery 元素,我现在需要以某种方式/获取元素正在移动的底层元素的 id,以便我可以更改它们的类。我已经创建了 6 个具有相关 id 的不同方块,并且我想在可拖动元素被拖动到它们上方时主动获取 id。我实际上是在尝试模拟悬停动作,但要使用触摸屏。我还包括相关的脚本。有任何想法吗?谢谢。
#div1 {
display: inline-block;
width: 200px;
height: 200px;
background-color: antiquewhite;
}
#div2 {
display: inline-block;
width: 200px;
height: 200px;
background-color: antiquewhite;
}
#div3 {
display: inline-block;
width: 200px;
height: 200px;
background-color: antiquewhite;
}
#div4 {
display: inline-block;
width: 200px;
height: 200px;
background-color: antiquewhite;
}
#div5 {
display: inline-block;
width: 200px;
height: 200px;
background-color: antiquewhite;
}
#div6 {
display: inline-block;
width: 200px;
height: 200px;
background-color: antiquewhite;
}
#circle_pointer {
position: absolute;
top: 200px;
left: 100px;
width: 60px;
height: 60px;
z-index: 10;
border-width: 5px;
border-style: solid;
border-radius: 50px;
border-color: rgba(255, 85, 255, 1);
}
#containment_wrapper {
width: 610px;
height: 400px;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<p id="coordinates">coordinates</p>
<p id="div_id"></p>
<div id="circle_pointer"></div>
<div id="containment_wrapper">
<div>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<div>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
</div>
<script>
$(function() {
$("#circle_pointer").draggable({
containment: "#containment_wrapper",
drag: function() {
$("#circle_pointer").addClass("sc"),
$("#map_container").addClass("sc1"),
x = $("#circle_pointer").position(),
$("#coordinates").html(x.top + ' , ' + x.left),
$("#div_id").html("div_id")
},
stop: function() {
$("#circle_pointer").removeClass("sc")
}
});
});
</script>
强文本