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

Question

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

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

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

我有三个函数：dragStart、drag 和 gradEnd。目前，我只能得到一个结果：当在拖动功能上设置 ui.position.left = 500; 时（使用条件），左侧位置设置为 500，但当然，元素然后停留在 500px。原因是每次触发拖拽功能时，left位置设置为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 属性。

我还提供了一个示例（基于closure/functional），它演示了如何处理此问题而无需检查 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>

第二个例子，多了一个'closure based functional approach':不需要你勾选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 个可拖动元素的位置

Set position of jquery draggable element while dragging

javascript

css

jquery

draggable