CODEWITHSUNDEEP
jqueryjquery-uivue.js
landunder
landunder

Reputation: 382

Vue.js + jQuery UI draggable

To make components draggable I have written a new vue directive like this

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

and I make them draggable on bind. This works fine in the inspector and if I drag the cards I see how top and left change, but it does not physically! I mean the cards stay on their place. Screenshot of the inspector. Looks fine.

I have tried it with helper: "clone" and this works (I can see the clone being dragged). But this isn't what I want.

If I select every card by the class selector like:

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

it works fine too, but I don't want to make all other elements draggable again after I added just a new one.

What am I doing wrong?

Upvotes: 4

Views: 7185

Answers (3)

Sanbrother
Sanbrother

Reputation: 621

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

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

Upvotes: 1

vbranden
vbranden

Reputation: 5986

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

Upvotes: 2

nunop
nunop

Reputation: 2207

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

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

Upvotes: 2

Related Questions