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

问题：

似乎对掉落区域的边缘确实存在困惑。当我将图像拖入窗口时，阴影和“Drop it like it hot”消息被应用......但只有当我拖动框周围的边距而不是框内本身时。如果我删除宽度和边距的限制，那么它表现正常。但是当有余量时，无论我做什么，它都会有这种奇怪的行为。

我做错了吗？这是我的第一个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入门套件。