我試圖讓一個元素的可拖動功能取決於點擊事件。我正在使用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。我不知道我在這裏做錯了什麼?任何暗示讚賞。
嘗試了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