在AngularJS中拖放：创建一个放置区域的指令，在拖动时显示叠加层

Question

我想要实现的目标

创建一个指令，让我们称之为dropZone，我可以在其中放置一些html（例如表单）。当用户将文件拖入网页时，我想在dropZone的内容上显示叠加层，就像在Gmail中一样。当然，当用户不再拖动文件时，该叠加应该消失。

我还希望能够检测指令上的drop事件来处理文件。

到目前为止我尝试了什么

我尝试创建一个使用此模板的指令：

template: '<div>' + 
        '<div id="drop-zone-overlay" class="drop-zone-overlay">' +
            '<h1>Drop files here</h1>' + 
        '</div>' +
        '<ng-transclude></ng-transclude>' + 
      '</div>',

这个CSS：

.drop-zone-overlay {
    box-sizing: border-box;
    display: none;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 99999;
    background: rgba(#60a7dc, .8);
    border: 5px dashed #60a7dc;
}

请参阅此Fiddle以获取完整示例。

我正在努力的部分是使覆盖“浮动”在指令的所有html内容上。知道如何实现这个目标吗？

Answer 1

我已经设法使用此模板的HTML代码实现了它：

template: '<div class="drop-zone-container">' + 
        '<div id="drop-zone-overlay" class="drop-zone-overlay">' +
            '<div class="drop-zone-overlay-text">Drop files here</div>' + 
        '</div>' +
        '<ng-transclude></ng-transclude>' + 
      '</div>'

这个CSS：

.drop-zone-container {
  position: relative;
}

.drop-zone-overlay {
    box-sizing: border-box;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 99999;
    background: rgba(#60a7dc, .8);
    border: 5px dashed #60a7dc;
    border-radius: 30px;
}

.drop-zone-overlay::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.drop-zone-overlay-text {
  display: inline-block;
  font-size: 2.8em;
  color: #60a7dc;
}

请参阅此Fiddle以获取完整示例。