无法通过 "stop" 事件更改可拖动对象的还原选项

Question

我正在尝试制作一个可拖动的列表项，因此它会显示其他选项，例如编辑或删除。我的想法是，如果用户拖动项目超过 x 像素并释放项目，所有内容都会显示；否则，该项目将恢复到其原始位置。我这样做是通过在 draggin 开始时存储初始 left 位置，然后在它停止时减去相同的 left 位置，所以它给了我 draggable 向左移动的像素数，然后使用它来决定该项目是否还原。

问题是我无法通过在 revert 选项上使用函数或在 stop 事件中设置条件来使其工作。

目前我的代码是这样的：

var move;

$(".todo-event").draggable({
    axis: "x",

    start: function (evt, ui) { move = ui.position.left; },

    stop: function (evt, ui) { move -= ui.position.left; },

    revert: function () { return (move <= 27); }
});

减法有效，但出于某种原因，在进入 revert 函数之前似乎没有进行减法，即 revert 函数中的 move == 0，并且设置超时不会做任何事情。

Answer 1

稍加测试后发现，还原函数在停止函数调用之前被调用。

这是一个工作版本，它存储元素上的开始位置，并在触发恢复功能时将元素位置与开始位置进行比较。

$(".todo-event").draggable({
  axis: "x",

  start: function(evt, ui) {
    console.clear();
    console.log('start')
    $(this).data('start', ui.position);
  },
  stop: function(evt, ui) {
    console.log('stop')
  },
  revert: function(evt, ui) {
    var $el=$(this),
      startL = $el.data('start').left,
      currL = $el.position().left,
      shouldRevert = Math.abs(currL - startL) <= 100;// increased threshold for demo

    console.log('revert', JSON.stringify([startL, currL, shouldRevert]));
    return shouldRevert;
  }
});

#draggable {
  width: 100px;
  height: 50px;
  padding: 0.5em;
}

<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="draggable" class="todo-event ui-widget-content">
  <p>Drag me</p>
</div>

无法通过 "stop" 事件更改可拖动对象的还原选项

Can't change the revert option on a draggable via the "stop" event

javascript

jquery

jquery-ui