相关疑难解决方法(0)

我在Html文件中有一个标准模板,如:

<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>

我想让卡(css选择器.card)变得可以用JQuery拖动.现在,由于Meteor使用模板自动更新DOM,我何时以及如何知道在哪里调用.draggable()？

编辑:这是迄今为止我的解决方案,使其他客户端的待定移动可见与摆动动画(使用CSS3):

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, …

在Metor 0.3.5中,当所有事件都是jQuery事件时,我能够使用jQuery UI Draggable,然后使用Metor 事件映射处理drag&dragstopevents:

Template.game.events['dragstop .card'] = function (e) {
    //stuff
};

但我刚刚在Meteor邮件列表中看到了这个:

在0.3.6中,事件映射不再依赖于jQuery

果然,上面的技术似乎不再起作用 - 我的dragstop处理程序现在根本没有被调用.

我非常感谢有关如何在0.3.6中实现相同效果的任何建议.