Vue.js + jQuery UI 可拖动答案

【问题标题】：Vue.js + jQuery UI draggableVue.js + jQuery UI 可拖动
【发布时间】：2016-05-16 01:20:53
【问题描述】：

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

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

我让它们在bind 上可拖动。这在检查器中工作正常，如果我拖动卡片，我会看到 top 和 left 的变化，但实际上并没有！我的意思是卡片留在原处。 Screenshot of the inspector. Looks fine.

我已经用helper: "clone" 进行了尝试，这很有效（我可以看到克隆被拖动）。但这不是我想要的。

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

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

它也可以正常工作，但我不想在添加一个新元素后再次使所有其他元素可拖动。

我做错了什么？

【问题讨论】：

这种定位通常需要display: absolute 或display: relative。你的 CSS 会干扰吗？
我有一个修补程序，它可以工作，但我不满意：setTimeout(function () { $(this.el).draggable(); }.bind(this), 20); 通常 jQuery 会设置这个，但你的评论指向正确的方向。
Vue 的 nextTick 在这种情况下可能是您所需要的。它在执行任何挂起的 DOM 更新后调用一个函数。
将 $(this.el).draggable() 放入更新中？

标签： jquery jquery-ui vue.js

【解决方案1】：

来自https://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() 不起作用，不知道为什么

【讨论】：

【解决方案2】：

您不需要使用 nextTick。由于问题是在加载元素之前调用了 jQuery draggable，因此您可以做其他使用 jQuery 的人所做的事情并使用 jQuery 的 .ready 方法

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

【讨论】：

【解决方案3】：

要使用jquery ui 函数，您需要使用nextTick 调用它。像这样：

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

【讨论】：

像这样，我会在每次打勾后再次将可拖动属性添加到每张卡片。这不是我想要的。