jQuery可拖动 - 从拖动事件返回取消后重新激活

Question

我的问题是我有一组 div。当我拖动它们中的任何一个并且它们到达侧面时（不完全是侧面，而是相当于侧面。所以它并不总是捕捉到另一个 div 的侧面，但是当它到达那一侧的坐标时，请参见图片下面）

在一定的变化范围内的另一个，它应该捕捉到另一个 div 的一侧。例如

我正在水平拖动，并且 div 将在到达 x=120 时立即捕捉到 x=100。所以在这种情况下方差是 20，它在 x=100 处执行 snap。

我正在做的是利用拖动，一旦达到 100，我将 div 强制为 x=120 并在拖动事件中返回 false。

我的问题是，由于我仍然按住鼠标左键，我无法在该点进一步拖动，也无法重新启用拖动。

当鼠标在捕捉后移动时，有没有一种方法可以撤消取消并重新激活拖动动作。

我尝试过但没有成功（假设是因为鼠标按钮仍然按住）：

1. 我尝试使用setTimeout 触发鼠标向上并单击。没用。
2. 我尝试了JScreateEvent，我相信这实际上是一样的，但没有奏效。
3. 我试图触发拖动事件。没用。

Google 似乎没有返回任何帮助。我觉得我现在正在用头撞墙。

任何帮助将不胜感激。

如果需要任何其他信息，请告诉我。

谢谢你， 杰夫

Answer 1

由于该元素与可拖动元素不在同一平面上，因此您可以添加另一个与父元素一样高的元素。这样您就可以在 Drag 中使用 Snap 到该元素。

示例

$(function() {
  function makeHidden(s) {
    var $targets = $(s);
    $targets.each(function(i, el) {
      var $el = $(el);
      $("<div>", {
        class: "hidden"
      }).css({
        position: "absolute",
        top: 0,
        left: $el.css("left"),
        width: $el.width() + "px",
        height: $el.parent().height() + "px"
      }).insertAfter(el);
    });
  }

  $("#drag-1").draggable({
    axis: "x",
    containment: "parent",
    snap: ".hidden",
    snapMode: "outer",
    snapTolerance: 20
  });

  makeHidden(".fixed");
});

.draggable,
.fixed {
  width: 90px;
  height: 80px;
  padding: 0;
  margin: 0;
  font-size: .9em;
}

.ui-widget-header p,
.ui-widget-content p {
  margin: 0;
}

#play-pen {
  height: 280px;
  position: relative;
}

#fixed-1 {
  position: absolute;
  top: 10px;
  left: 120px;
}

#drag-1 {
  position: absolute;
  top: 120px;
  left: 10px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<div id="play-pen" class="ui-widget-header">
  <div id="drag-1" class="draggable ui-widget-content">
    <p>Drag 1</p>
  </div>
  <div id="fixed-1" class="fixed ui-widget-content">
    <p>Fixed 1</p>
  </div>
</div>

对于makeHidden()，您可以传入一个选择器、元素或jQuery 对象。如果传入 Selector 或 jQuery 对象，它将适用于匹配的一个或所有元素。如果您有 2 或 3 个固定元素，它将为每个元素制作隐藏项。

查看更多：

• https://api.jqueryui.com/draggable/#option-snap
• https://api.jqueryui.com/draggable/#option-snapMode
• https://api.jqueryui.com/draggable/#option-snapTolerance

如果固定元素的数量发生变化，您可能需要将makeHidden() 移动到 Draggable 的 Start 回调中。然后在 Stop 中销毁它们。