Vue.js + jQuery UI draggable

Question

为使组件可拖动，我编写了一个新的vue指令，代码如下：

```

Vue.directive('drag', {
  bind: function () {
    $(this.el).draggable();
  }
});

我会将它们绑定到可拖动上bind。这在检查器中很好用，如果我拖动卡片，我可以看到top和left如何变化，但实际上并没有物理上移动！我的意思是卡片仍然停留在原地。 检查器截图。看起来不错。

我尝试过使用helper: "clone"，这样可以工作（我可以看到克隆正在被拖动）。但这不是我想要的。

如果我通过类选择器选择每张卡片：

$(".card").draggable();

它也能正常工作，但是我不希望在添加新元素后再次使所有其他元素可拖动。

我做错了什么？

- landunder

---

那种类型的定位通常需要使用 display: absolute 或 display: relative。你的 CSS 是否与此相互干扰了？ - David K. Hess

我有一个热修复程序，它可以工作，但我不满意： setTimeout(function () { $(this.el).draggable(); }.bind(this), 20);通常情况下，jQuery会设置这个，但是你的评论指向了正确的方向。 - landunder

Vue 的 nextTick 在这种情况下可能是你需要的。它会在所有待处理的 DOM 更新完成后调用一个函数。 - David K. Hess

把 $(this.el).draggable() 放在 update 中？ - vbranden

Answer 1

为了使用jquery ui函数，你需要在nextTick中调用它。像这样：

Vue.nextTick(function () {
        $('.card').draggable();
});

- nunop

---

我不想在每个时钟周期后再次为每张卡片添加可拖动属性。 - landunder

Answer 2

你不需要使用nextTick。由于问题在于调用jQuery draggable之前元素被加载，因此你可以像其他使用jQuery的人一样使用jQuery的.ready方法。

Vue.directive('draggable', {
    bind: function () {
        var self = this
        $(document).ready(function () {
            $(self.el).draggable()
        })
    }
})

- vbranden

Answer 3

来自 https://v2.vuejs.org/v2/api/#mounted

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the entire view has been rendered
    $('.card').draggable();
  })
}

顺便说一下，$(this.el).draggable()不起作用，我不知道为什么。

- Sanbrother