Vue.js + jQuery UI draggable Vue.js + jQuery UI draggable vue.js vue.js

Vue.js + jQuery UI draggable


In order to use a jquery ui function, you need to call it with nextTick. Like this:

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


you dont need to use nextTick. Since the issue is that jQuery draggable is being called before the elements are loaded you can do what everyone else that uses jQuery does and use jQuery's .ready method

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


From 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();  })}

By the way, $(this.el).draggable() does not work, I don't know why