Ember.js 中的 CSS 边框和奇怪的元素边界

Question

背景信息：

我正在使用 ember.js。在我的标记中，我有

<script type="text/x-handlebars" id="add">
  {{#view App.AddView id="drop"}}
      {{msg}}
  {{/view}}
</script>

这个视图就像

App.AddView = Ember.View.extend({
  dragEnter: function(event) {
    $("#drop").addClass('enter');
    $('#drop').text('Drop it like it\'s hot.');
  },
  dragLeave: function(event) {
    $("#drop").removeClass('enter');
    $('#drop').text('Drag image files here.');
  }
});

以及相关的 CSS：

#drop {
  border: 10px solid gray;
  max-width: 50%;
  margin:auto;
}
#drop.enter {
  box-shadow: 0px 2px 4pt 4pt lightskyblue;
}

问题：

似乎对放置区域边缘的真正位置感到困惑。当我将图像拖到窗口中时，会应用阴影和“像热一样放下”消息......但仅当我拖动框周围的边缘时，而不是框本身。如果我取消对宽度和边距的限制，那么它的行为正常。但是当有边距时，无论我做什么，它都会出现这种奇怪的行为。

我做错了吗？这是我的第一个 ember.js 项目。我应该以不同的方式将 ID 应用于视图创建的元素吗？我应该做一些定位的事情吗？

Answer 1

我试图重现您的问题。对我来说似乎工作正常 - demo on emberjs.jsbin.com。你可以用 Ember.js 的方式做一些事情。控制器：

App.AddView = Ember.View.extend({
  classNameBindings: [ 'enter:enter:leave'],
  enter: false,
  dragEnter: function(event) {
    this.set('enter', true);
    this.set('text', 'Drop it like it\'s hot.');
  },
  dragLeave: function(event) {
    this.set('enter', false);
    this.set('text', 'Drag image files here.');
  },
  text: ''
});

车把模板：

<script type="text/x-handlebars" id="add">
  {{#view App.AddView id="drop"}}
      {{view.text}}
  {{/view}}
</script>

您可以访问完整代码here，但其余的只是 Ember.js 入门工具包。