在拖动 jquery 可拖动 div 时显示指南并进行捕捉

Question

如果有多个 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 覆盖在另一个上。

我尝试在线搜索，但解决方案太旧、太笨拙且适用于 jquery 2.x 请帮忙！

Answer 1

要解决您问题的第一部分，您可以像这样管理指南。

$(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, ui) {
      startGuides(this);
    },
    resize: function(e, ui) {
      var c = getMyCorners(this);
      moveGuides(c.top, c.right);
    },
    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 的容差应该是多少？

由于您没有提供这些详细信息，因此我无法完整回答您的第二个问题。