可使用 Vue.js 拖动，无法 return 到原始位置

Question

我正在尝试使元素的可拖动功能取决于单击事件。我正在使用 jquery-ui 的可拖动方法（在 vue.js 实例中）。

在我的 Vue 实例中，我有这两个数据属性：isVisible 和 isDraggable。每次用户单击按钮时，它们都会假设一个真值或假值。在我的方法对象上，我有以下内容：

methods: {
    toggleBox: function() {
        this.IsVisible = !this.IsVisible;
        this.isDraggable = !this.isDraggable;
    }
}

我正在使用 destroy 方法 以使目标元素 return 回到其原始位置 （文档here)。但是，我没有得到预期的结果，如下面的 jsfiddle 所示。以下是解决此问题的众多（未成功）尝试之一：

ready: function() {
    this.$nextTick(function() {
        if (this.isDraggable == true) {
            $('.box').draggable({
                containment: "window"
            })
        } else if (this.isDraggable == false) {
            $('.box').draggable(
                "destroy"
            )
        }
    })
}

Jsfiddle here。我想知道我在这里做错了什么？任何提示表示赞赏。

Answer 1

ready 函数仅在 vm 元素初始化期间被调用一次。每当您单击 "toggle" 按钮时，都不会通知 nextTick 方法执行。我对 vue api 一点都不熟悉，所以可能会有一种方法可以使用 nextTick 方法来做你想做的事情。

鉴于我对 api 缺乏了解，我想出了一个似乎最符合您要求的解决方案，即更新 toggleBox 方法来检查 isDraggable 属性并根据其值重置框的位置。

如果您引入其他元素，您需要实施一个考虑所有默认位置的解决方案，并在您单击 "toggle" 按钮时重新应用它们。

toggleBox: function() {
  this.IsVisible = !this.IsVisible;
  this.isDraggable = !this.isDraggable;
  if (this.isDraggable) {
    $('.box').draggable({
      containment: "window"
    })
  } else if (!this.isDraggable) {
    $('.box').offset({ top: 8, left: 8});
  }
}

Fiddle example

Answer 2

添加到上面@Yass 的回答中，如果不是硬编码 offset 元素 .box 的顶部位置，而是想计算它，这是一种方法（这在浏览器的 window 改变大小的情况下很有用：

toggleBox: function() {

    this.IsVisible = !this.IsVisible;
    this.isDraggable = !this.isDraggable;


    var body = document.body.getBoundingClientRect();
    var element = document.querySelector('.box').getBoundingClientRect();

    var topPos = body.height - element.height;

    if (this.isDraggable) {
       $('.box').draggable({
          containment: "window"
       })
    }
    else if (!this.isDraggable) {
       $('.box').offset({ 
           top: this.topPos, 
           left: 8});
    }
}

可使用 Vue.js 拖动，无法 return 到原始位置

Draggable with Vue.js, not being able to return to original position

jquery-ui

jquery-ui-draggable

vue.js