可拖動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，無法返回到原始位置

回答

相關問題