【问题标题】：Drag and drop in AngularJS: make a directive that is a drop zone, showing an overlay when draggingAngularJS中的拖放：制作一个作为放置区的指令，拖动时显示覆盖
【发布时间】：2016-06-08 16:06:38
【问题描述】：

我想要实现的目标

创建一个指令，我们称之为 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 内容上。知道如何实现这一目标吗？

【问题讨论】：

标签： javascript css angularjs drag-and-drop

【解决方案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。

【讨论】：