jquery - 拖动可拖动元素时在其下显示 id
问题描述
我正在使用 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>
强文本
解决方案
您可以使用elementFromPoint()
来获取当前被拖过来的元素。对于x.top
靠近底部边框的值,这将返回null
,因此我对此进行了检查以防止出现任何问题。请注意,我更改了您正在使用的 ID,因为您有重复的 ID,而 ID 必须是唯一的。
$(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),
getId(x.top, x.left)
},
stop: function() {
$("#circle_pointer").removeClass("sc")
}
});
function getId(x, y) {
var element = document.elementFromPoint(y, x);
if (element != null) {
var id = element.id;
$("#div_id").html(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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.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="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
</div>
</div>
推荐阅读
- android - 导航组件:显示带圆角的对话框
- excel - CopyFolder 如果文件夹不存在通配符
- c++ - 如何从具有多种类型的单行文件中仅读取一种类型?
- common-lisp - 在这个 Common Lisp 示例中,socket-close 的目的是什么?
- terminal - Linux终端快捷方式
- python - 如何使用相同的anaconda管理不同的模块版本?
- python - 如何将事件连接到 matplotlib.collections.PatchCollection
- windows - 在批处理文件脚本中查找通配符列表的最新文件
- django - 使用 mysite.urls 中定义的 URLconf 时出错(Django 教程)
- javascript - 输入值更改时更改 html 属性