drag-and-drop - Meteor 中的拖车问题

Question

我刚刚开始学习 Meteor(和模板)。到目前为止我真的很享受。但是，我在表格上使用 HTML5 native 拖放事件时遇到了一个奇怪的问题。请注意，我没有使用 jQuery 事件。

我有一个包含可放置 td 和可拖动 元素 的表格。

所以我的 table 模板看起来像这样:

<template name="table">
<table>
  {{#each row}}
     <tr>
        {{#each col}}
           <td>
             {{#each elements}}
               {{>element}}
             {{/each}}
            </td>
        {{/each}}
     </tr>
   {{/each}}
</table>
</template>

Template.tasktable.events({
  'dragover td': function(evt) {
    evt.preventDefault();
  },
  'drop td': function(evt) {
    evt.preventDefault();
    var id = evt.dataTransfer.getData('Text');
    Collection.update({_id: id}, {$set: {value: this.value}});
  }
});

然后我的 element 模板如下所示:

<template name="element">
  <div draggable="true">{{value}}</div>
</template>

Template.element.events({
  'dragstart': function(evt, tmpl) {
     evt.dataTransfer.setData('Text', this._id);
  }
});

出于某种让我的大脑融化的原因，drag over 事件之后是 rendering 事件，正如您在此处的开发工具图像上看到的那样:http://cl.ly/image/3O1S2d1j1f1a

这是非常痛苦的，因为 dragover 被很多 触发，随后 drop 事件在几秒钟后排队。我不知道那是从哪里来的，看起来像正在调用 domutils.js。

希望我已经足够清楚了。

非常感谢。

编辑

我通过从 Template events 中删除 dragover 事件并添加

设法阻止了渲染事件的出现

$(document).on('dragover', 'td', function(evt) {evt.preventDefault();})

这是 jQuery，但不会被 Meteor 的 domutils.js 或 listeners.js 捕获。

Answer 1

根据@Cuberto 在评论中的回答，我已经成功地通过使用他们即将推出的新模板引擎 Blaze UI 升级 Meteor(仍在开发中，尚未发布)来解决问题。

Blaze UI 使用 jQuery 事件，这似乎解决了上述重新设计布局的问题。

如果您想永久升级到 Blaze UI，您需要从终端运行:

meteor update --release template-engine-preview-10.1

如果您想继续使用当前版本的 Meteor (0.7.0.1) 附带的旧模板引擎，我在原始帖子的编辑中提到的修复解决了这个问题:

$(document).on('dragover', 'td', function(evt) {evt.preventDefault();})