Question

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

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

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

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

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元素初始化期间被调用一次。每当您单击“切换”按钮时，没有任何内容可以告诉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});
  }
}

<强> Fiddle example

Answer 2

在上面添加@ 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});
    }
}

使用Vue.js可拖动，无法返回原始位置

2 个答案: