0

I hope used some APIs from JQuery UI, such as draggable(). but it doesn't work. I found the possible cause is that there is null object for $.ui in Vue invoking. Would you like to share some experiences for this please?

xinshouke
  • 517
  • 1
  • 5
  • 9
  • if you are using webpack you might need to use the webpack.ProvidePlugin for jQuery. see http://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack – vbranden Jun 22 '16 at 06:06
  • Could you explain your problem in greater depth? Here is a jsfiddle which applies draggable() to a vue js component: https://jsfiddle.net/asemahle/dj8uujky/ – asemahle Jun 22 '16 at 17:44

1 Answers1

0

I've been using Jquery UI and Vue js without compatibility issues. If you want to make a component draggable you'll need to attach any handlers after vue has updated the DOM.

A component's html element can be accessed via its $el property. From the Vue js Lifecycle Diagram we can see that $el will be available during the ready lifecycle hook.

Knowing this, we can make a component draggable() with the following code:

Vue.component('draggable-widget', {
    template: '#draggable-widget',

    ready: function() {
        $(this.$el).draggable();
    }
});

Here is a JSFiddle showing it in action.

asemahle
  • 20,235
  • 4
  • 40
  • 38
  • I use Vue.nextTick(function () {} ... it also work, let me try your way if am idele, thanks! I thought your answer mus be correct! – xinshouke Jun 30 '16 at 07:16
  • If you are making the component draggable from the parent Vue instance, or from a parent component, then the `$nextTick` function is likely necessary. The way I explained works if the component is making *itself* draggable. Glad you got it working! – asemahle Jun 30 '16 at 13:10