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

我试图让一个元素的可拖动功能取决于点击事件。我正在使用jquery-ui的可拖动方法（在vue.js实例中）。可拖动Vue.js，无法返回到原始位置

在我的Vue的例子中，我有这两个数据属性：ISVISIBLE和isDraggable。每次用户点击一个按钮时，它们都会呈现出真实或虚假的值。在我的方法对象，我有以下：

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

我使用破坏方法才能有针对性体返回到原来的位置（文档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。我不知道我在这里做错了什么？任何暗示赞赏。

来源

2016-02-13 pierrebonbon

尝试了jqueryui的_revert_方法，但无济于事。 Jsfiddle [here]（http://jsfiddle.net/pierrebonbon/7zp5er3f/29/） – pierrebonbon

我在'nextTick'函数内放置了一个'console.log'，它在初始加载时只被触发一次。如何在'toggleBox'中添加一些逻辑来使用jquery的'offset'方法重置元素的位置？因此，当可见性设置为false时，您可以重置位置，例如$（'。selector'）。offset（{top：0，left：0}）;'？，其中'top'和'left'的值由您定义。 – Yass

谢谢你的提示，我试过了，但我遇到了和以前一样的问题。也就是说，不管使用什么方法，_isVisible_的价值对盒子的位置没有直接的影响。也许vm。$ watch可以在这里使用。 – pierrebonbon

在初始化vm元素期间，ready函数仅被调用一次。只要你点击“切换”按钮，没有任何东西可以告诉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

来源

2016-02-13 16:11:01 Yass

再次感谢您的解决方案，以及详细的解释！ – pierrebonbon

不客气:) – 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}); 
    } 
}

来源

2016-02-23 15:14:29 pierrebonbon

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

回答

相关问题