拖放在AngularJS：做一個指令，是一個放置區域，顯示出覆蓋拖動

Question

當我想實現

創建一個指示，讓我們把它懸浮窗，在這我可以把一些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全例子。