Question

我刚开始学习流星（和模板）。到目前为止我真的很喜欢它。但是，我在桌面上使用HTML5本地拖放事件遇到了一个奇怪的问题。请注意，我不使用jQuery事件。

我有一张可放置td和可拖动elements的表格。

所以我的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事件后面会出现呈现事件，正如您在开发工具图片中所看到的那样：http://cl.ly/image/3O1S2d1j1f1a

这是非常痛苦的，因为dragover被解雇很多，随后drop事件在几秒钟后排队。我不知道它来自哪里，看起来像是 domutils.js 。

希望我足够清楚。

非常感谢。

修改

我设法通过从dragover移除Template events事件并添加

来阻止呈现事件的显示

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

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

Answer 1

根据评论中的@Cuberto回答，我成功地通过升级Meteor与他们即将推出的新模板引擎Blaze UI（目前仍在进行中，尚未发布）来成功解决问题。

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();})

流星中的Dragover问题

修改

1 个答案: