jquery-ui - 使用 JqueryUI draggable()，如果元素没有被拖动一定距离，我如何才能恢复它？

Question

像这样的东西：

$("#0").draggable({
                    handle:'#borderItem #statementType #statementContent',

                    cursor: "move",
                    axis: "x",
                    stop: function(event, ui) {

                        var direction = (ui.originalPosition.left > ui.position.left) ? 'left' : 'right';
                        var distance = 0;
                        if (direction == "left")
                        {
                            distance = ui.originalPosition.left - ui.position.left;
                        }
                        else
                        {
                            distance = ui.position.left - ui.originalPosition.left;
                        }
                        if (distance>75)
                        {
                            self.articleSlid(direction);

                        }
                        else
                        {
                           // Revert!
                        }
                    }
                });

Answer 1

我用下面的代码做到了：

                var startTop = $("#0").outerHeight() + $("#0").position().top;
                var startLeft = $("#0").position().left;
                $("#0").draggable({
                    handle:'#borderItem #statementType #statementContent',

                    cursor: "move",
                    axis: "x",
                    stop: function(event, ui) {

                        var direction = (ui.originalPosition.left > ui.position.left) ? 'left' : 'right';
                        var distance = 0;
                        if (direction == "left")
                        {
                            distance = ui.originalPosition.left - ui.position.left;
                        }
                        else
                        {
                            distance = ui.position.left - ui.originalPosition.left;
                        }
                        if (distance>75)
                        {
                            self.articleSlid(direction);

                        }
                        else
                        {
                            $("#0").animate({left: startLeft},"slow");
                        }
                    }
                });

Answer 2

您的解决方案正在运行，但该元素也已被可放置容器接受。

您应该使用 revert 回调来测试您的条件是否满足：

$("#0").draggable(
{
  ...,
  revert: function(event, ui)
  {
     //Test your position
     var position = ...;
     if(position === false)
     {
        //revert the element by returning true
        return true;
     }
     else
     {
        //return false so that the element does not revert
        return false;
     }
  },
  ...
} );