Невозможно изменить опцию возврата на перетаскиваемом через событие «стоп»

Question

Я пытаюсь создать перетаскиваемый элемент списка, чтобы он отображал дополнительные параметры, такие как редактирование или удаление. Моя идея состоит в том, что если пользователь перетаскивает элемент больше чем x пикселей и отпускает элемент, все будет отображаться; в противном случае элемент возвращается в исходное положение. Я делаю это, сохраняя начальную позицию 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>