拖动时设置jquery可拖动元素的位置

Question

在我的网络应用程序中，有一个可拖动的元素。 当元素在拖动时达到一定限制时，我需要设置该元素的左侧位置。 使用 jQuery 可拖动小部件，我可以访问元素的位置：

function drag(e, ui) {
 console.log(ui.position.left);
}

假设我的左侧属性设置为 1100 像素，我需要将其设置为 500 像素，并且不停止拖动。

我有三个函数：dragStart、drag 和 gradEnd。 目前，我只得到了一个结果：在拖动功能上设置ui.position.left = 500; 时（使用条件），左侧位置设置为500，但当然，元素随后被卡在500px。原因是每次触发拖动功能时，左侧位置设置为500。

如果代码只运行一次ui.position.left = 500; 行，position left 属性设置为 500，但直接重置为 1100。

如何一劳永逸地设置left属性？

$("#divId").draggable({
  drag: drag,
})

function drag(e, ui) {
  if (ui.position.top > 50) {
    ui.position.left = 100;
  }
}

#divId {
  height: 70px;
  background-color: white;
  border: 4px solid #000000;
  text-align: center;
  color: black;
  cursor: grab;
}

<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>

<div id="divId">
  Bubble
</div>

Answer 1

我不确定jQuery Draggable 是如何处理幕后事务的，但即使在设置ui.position.left = 100 之后，它也不会在事件中注册，直到拖动停止后 - 这就是为什么我选择检查实际的CSS被定位元素的属性。

我还提供了一个示例（基于闭包/功能），它演示了如何处理此问题而无需检查 CSS..

---

---

第一个例子：

$("#divId").draggable({
  drag: drag
});

function drag(e, ui) {
  if (ui.position.top > 50) {
    $("#container").css('padding-left', '100px');
    $(this).css('left', '0px');
  }
  if (ui.position.left < 0) {
    ui.position.left = 0
  }
}

#divId {
  height: 70px;
  background-color: white;
  border: 4px solid #000000;
  text-align: center;
  color: black;
  width: 300px;
  cursor: grab;
}

#container {
  height: 100vh;
  width: 1000px;
}

<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>

<div id="container">
  <div id="divId">
    Bubble
  </div>
</div>

---

---

---

第二个例子，更多的是“基于闭包的函数式方法”：不需要您检查CSS..

$("#divId").draggable({
  drag: drag()
});

function drag(e, ui) {
  let TRIGGER = false, TOP_THRESHOLD = 50, LEFT_POSITION = 100;
  return function(e, ui) {
    if (TRIGGER) {
      ui.position.left = LEFT_POSITION;
    } else if (ui.position.top > TOP_THRESHOLD) {
      TRIGGER = true;
      ui.position.left = LEFT_POSITION;
    }
  }
}

#divId {
  height: 70px;
  background-color: white;
  border: 4px solid #000000;
  text-align: center;
  color: black;
  cursor: grab;
}

<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>

<div id="divId">
  Bubble
</div>

---

---