Vue.js + jQuery UI draggable -

to make components draggable have written new vue directive this

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

and make them draggable on bind. works fine in inspector , if drag cards see how top , left change, not physically! mean cards stay on place. screenshot of inspector. looks fine.

i have tried helper: "clone" , works (i can see clone being dragged). isn't want.

if select every card class selector like:

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

it works fine too, don't want make other elements draggable again after added new one.

what doing wrong?

you dont need use nexttick. since issue jquery draggable being called before elements loaded can else uses jquery , use jquery's .ready method

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