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

Posted 2023-05-08

【中文标题】在拖动 jquery 可拖动 div 时显示指南并进行捕捉

【英文标题】：Show Guides and do snapping while dragging jquery draggable divs

【发布时间】：2021-06-13 23:06:39

【问题描述】：

如果有多个 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 请帮忙！

【问题讨论】：

欢迎来到 Stack Overflow。这个问题的范围可能太大了。除了 Snapping 之外，jQuery UI 没有内置任何这些功能。从图像中不清楚应该生成指南或它们应该如何工作。最好将其分解为小问题，然后在您需要帮助时提出每个问题。

【参考方案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 的容差应该是多少？

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

【讨论】：

这正是我要找的，谢谢，但是如果我将框拖到页面上某个点下方，垂直参考线会被剪掉并且无法正确显示，是的，我希望参考线捕捉到盒子的边缘。捕捉距离应为 5px。 Refer to this jsfiddle，我希望指南和捕捉是这样的

@SomeNerd 如果是这种情况，您将需要在发生scroll 事件时调整垂直指南的top。

@SomeNerd 您共享的示例基于其他元素而不是被拖动的元素创建指南。查看代码，它似乎可以毫无问题地迁移到 jQuery 3.4.1 和 jQuery UI 1.12.1。见：jsfiddle.net/Twisty/zkuadgyf

会在scroll事件发生时对垂直参考线的top进行调整，你也可以在你的答案中添加捕捉功能，保持捕捉距离5px。我们快到了！

我给出了 jsfiddle 示例，仅供参考。它对可拖动对象使用绝对定位。如果我更改它，那么示例似乎无法正常工作。我希望能够保持任何类型的定位并且不影响可拖动 div 的行为，当我们移动到 jQuery 3.4.1 时，div 在拖动开始时跳转到光标下的开始