Question

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

问题是我无法通过使用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函数（即move == 0函数内的revert）并设置之前，似乎没有进行减法。超时什么也没做。

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>

无法通过“停止”事件更改可拖动对象上的还原选项

1 个答案: