使用Vue.js拖动，不能返回原来的位置
使用Vue.js拖动，不能返回原来的位置
提问于 2016-02-13 01:15:11
我试图让元素的可拖动功能依赖于单击事件。我正在使用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 这里.我想知道我在这里做错了什么？任何暗示都很感激。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-02-13 16: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});
}
}Stack Overflow用户
发布于 2016-02-23 15: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});
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35374904
复制相关文章
相似问题
腾讯云开发者
