meteor - How to update a collection on jQuery (drag and) drop -


i'm building meteor app let's user organize lists of items in tags.

i use jquery draggable , droppable update collection when user drags item 1 tag another.

i find hard understand how/where/when should call function. i've tried few different options (including this "hacky way of doing it". the blaze documentation mentions functions can called on dom events, lacks drag , drop events i'm looking for. i've settled on calling function under template.rendered, means item can dropped once per render. i've tried counter tracker.autorun, don't think understand how works , item can still dropped once per render.

how can make .item draggable several times per render?

template.tag.rendered = function () {   //wait on subscriptions load   if (session.get('data_loaded')) {      tracker.autorun(function () {       $(".item").draggable({         revert: true,          start: function (event, ui) {           var movingitem = blaze.getdata(this)._id;           session.set('movingitem', movingitem);         },        });        $(".tag").droppable({         hoverclass: 'droppable',         drop: function () {           var movingitem = session.get('movingitem');           var acceptingtag = blaze.getdata(this)._id;           items.update(movingitem, {             $set: {"parents": acceptingtag}           });         }       });      });   } }; 

i found solution.

by separating .draggable , .droppable 2 different template.rendered function correctly called each time item moved.

no need tracker.autorun

template.item.rendered = function () {   if (session.get('data_loaded')) {        $(".item").draggable({         revert: true,          start: function (event, ui) {           var movingitem = blaze.getdata(this)._id;           session.set('movingitem', movingitem);           console.log('moving ' + movingitem);         },       });   } };  template.tag.rendered = function () {   if (session.get('data_loaded')) {        $(".tag").droppable({         hoverclass: 'droppable',         drop: function () {           var movingitem = session.get('movingitem');           var acceptingtag = blaze.getdata(this)._id;           items.update(movingitem, {             $set: {"parents": acceptingtag}           });           console.log('dropped on ' + acceptingtag);         }       });   } }; 

Comments

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -