问使用Vue.js拖动，不能返回原来的位置
EN

Stack Overflow用户

提问于 2016-02-12 17:15:11

回答 2查看 1.8K关注 0票数 1

我试图让元素的可拖动功能依赖于单击事件。我正在使用jquery的可拖动方法(在vue.js实例中)。

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

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

为了使目标元素返回到它原来的位置，我使用了破坏方法(Documents这里)。然而，我并没有得到预期的结果，可以从下面的小提琴曲中看到。以下是解决这一问题的许多(不成功的)时间表之一：

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

Jsfiddle 这里.我想知道我在这里做错了什么？任何暗示都很感激。

vue.js

jquery-ui

jquery-ui-draggable

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-02-13 08:11:01

在初始化ready元素时，只调用一次vm函数。无论何时单击“切换”按钮，都不会告诉nextTick方法执行。我对vue api一点也不熟悉，所以可能会有一种使用nextTick方法来做您想做的事情的方法。

鉴于我对api缺乏了解，我想出了一个解决方案，它似乎是您的需求中最简单的解决方案，即更新toggleBox方法以检查isDraggable属性并根据其值重置盒子的位置。

如果引入其他元素，则需要实现一个解决方案，该解决方案要考虑到所有的默认位置，并在单击“切换”按钮时重新应用它们。

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});
  }
}

小提琴例子

票数 1

Stack Overflow用户

发布于 2016-02-23 07:14:29

添加到@Yass上面的答案后，如果您不需要对offset的元素.box的顶部进行硬编码，而是想要计算它，那么有一种方法可以这样做(例如，在浏览器的窗口更改大小的情况下，这是有用的)：

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});
    }
}