Question

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

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

假设我的left属性设置为1100px，我需要将其设置为500px，并且不停止拖动。

我具有三个功能：dragStart，drag和gradEnd。目前，我仅获得了一个结果：在拖动功能上设置ui.position.left = 500;（使用条件）时，左侧位置设置为500，但是当然，该元素然后停留在500px。原因是每次触发拖动功能时，左侧位置都会设置为500。

如果代码仅在行ui.position.left = 500;上运行一次，则left 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>

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

1 个答案: