问题描述
如果有多个 jquery 可拖动 div,我想查看指南并捕捉到其他 div 的指南、边缘和角落。
代码如下:
$(".draggable").draggable();
$(".draggable").resizable();
body {
font-family: courier new,courier;
font-size: 12px;
}
.draggable {
border: 1px solid #ccc;
width: 100px;
height: 80px;
cursor: move;
position: relative;
}
.guide {
display: none;
position: absolute;
left: 0;
top: 0;
}
#guide-h {
border-top: 1px dashed #55f;
width: 100%;
}
#guide-v {
border-left: 1px dashed #55f;
height: 100%;
}
#image{
height: 150px;
width: 200px;
}
img{
width: 100%;
height: 100%;
}
#image_h {
position: absolute;
color: white;
top: 0;
left: 0;
}
<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.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
<div class="draggable">drag me!</div>
<div class="draggable">you can drag me too,if you like</div>
<div class="draggable">hep hep</div>
<div class="draggable" id="image">
<img src="https://cdn.pixabay.com/photo/2021/02/06/16/29/jay-5988657__340.jpg">
<div id="image_h">
Hello
</div>
</div>
<div id="guide-h" class="guide"></div>
<div id="guide-v" class="guide"></div>
下图中的蓝线是我想要在拖动 div 时显示的内容 see image here。当 div 对齐时,div 应该对齐蓝色引导线。
不要更改类的相对和绝对位置,因为我已经使用它们将一个 div 覆盖在另一个 div 上。
我尝试在线搜索,但解决方案太旧了,无法使用 jquery 2.x 请帮忙!
解决方法
要解决问题的第一部分,您可以像这样管理指南。
$(function() {
function moveGuides(top,left) {
$("#guide-h").css("top",top + "px");
$("#guide-v").css("left",left + "px");
}
function getMyCorners(el) {
var p = $(el).position();
return {
top: p.top,left: p.left,bottom: p.top + $(el).height(),right: p.left + $(el).width()
};
}
function startGuides(targetEl) {
var c = getMyCorners(targetEl);
moveGuides(c.top,c.right);
$(".guide").show();
}
function stopGuides() {
$(".guide").hide();
}
$(".draggable").draggable({
start: function(e,ui) {
startGuides(this);
},drag: function(e,ui) {
var c = getMyCorners(this);
moveGuides(c.top,c.right);
},stop: stopGuides
});
$(".draggable").resizable({
start: function(e,resize: function(e,stop: stopGuides
});
});
body {
font-family: courier new,courier;
font-size: 12px;
}
.draggable {
border: 1px solid #ccc;
width: 100px;
height: 80px;
cursor: move;
position: relative;
}
.guide {
display: none;
position: absolute;
left: 0;
top: 0;
}
#guide-h {
border-top: 1px dashed #55f;
width: 100%;
}
#guide-v {
border-left: 1px dashed #55f;
height: 100%;
}
#image {
height: 150px;
width: 200px;
}
img {
width: 100%;
height: 100%;
}
#image_h {
position: absolute;
color: white;
top: 0;
left: 0;
}
<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.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<div class="draggable">drag me!</div>
<div class="draggable">you can drag me too,if you like</div>
<div class="draggable">hep hep</div>
<div class="draggable" id="image">
<img src="https://cdn.pixabay.com/photo/2021/02/06/16/29/jay-5988657__340.jpg">
<div id="image_h">
Hello
</div>
</div>
<div id="guide-h" class="guide"></div>
<div id="guide-v" class="guide"></div>
借助辅助功能,您可以显示指南,并根据特定事件移动它们。
下一个涉及更多的部分是为各种元素创建碰撞检测。这将需要针对所有其他元素检查所涉及的每个元素。例如:
if($("#guide-h").position().top == $(".draggable").position().top){
// Stop event
}
我猜您正在寻找创建对齐方式。因此,当指南与边缘碰撞时,它应该防止用户在该方向上进一步拖动或调整元素的大小。另外,您是否希望它 Snap 以及该 Snap 的容差应该是多少?
由于您没有提供这些详细信息,我无法真正完整地回答您的第二个问题。