Vue.js + jQuery UI 可拖动

Posted 2023-02-22

【中文标题】Vue.js + jQuery UI 可拖动

【英文标题】：Vue.js + jQuery UI draggable

【发布时间】：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() 放入更新中？

【参考方案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();
);

【讨论】：

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