Как вызвать JQuery .draggable () для элементов, созданных шаблонами?
У меня есть стандартный шаблон в Html-файле, как:
<code><template name="cards"> {{#each all_cards}} {{> card_item}} {{/each}} </template> <template name="card_item"> <div class="card" style="left:{{position.x}}px; top:{{position.y}}px"> {{title}} </div> </template> </code>
Я хочу, чтобы карты (css selector .card) стали перетаскиваемыми с помощью JQuery. Теперь, когда Meteor автоматически обновляет DOM с помощью шаблона, когда и как я узнаю, где вызывать .draggable () для чего?
РЕДАКТИРОВАТЬ: Это пока мое решение, которое делает ожидающие движения на другом клиенте видимыми с помощью анимации колебания (с использованием CSS3):
<code>Template.card_item.events = { 'mouseover .card': function (e) { var $target = $(e.target); var $cardContainer = $target.hasClass('card') ? $target : $target.parents('.card'); $cardContainer.draggable({containment: "parent", distance: 3}); }, 'dragstart .card': function (e) { Session.set("dragging_id", e.target.id); $(e.target).addClass("drag"); pos = $(e.target).position(); Events.insert({type: "dragstart", id:e.target.id, left: pos.left, top: pos.top}); }, 'dragstop .card': function (e) { pos = $(e.target).position(); Events.insert({type: "dragstop", id:e.target.id, left: pos.left, top: pos.top}); Cards.update(e.target.id, {$set: {left:pos.left, top:pos.top}}); Session.set("dragging_id", null); } } Events.find().observe({ added: function(event) { if (event.type == "dragstart" && !Session.equals("dragging_id", event.id)) { $("#"+event.id).draggable({disabled: true}); $("#"+event.id).addClass("wobble"); } if (event.type == "dragstop" && !Session.equals("dragging_id", event.id)) { $("#"+event.id).animate({left: event.left, top: event.top}, 250); Events.remove({id:this.id}); $("#"+event.id).draggable({disabled: false}); } } }); </code>