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
Post a Comment