时间戳

首页 > 解决方案 > Angular - How to change dropzone color when drag a image

angular - Angular - How to change dropzone color when drag a image

问题描述

I am working with angular and developed an image input. In this input I developed a dropzone that serves to drag the files.

How can I change the dropzone background when dragging a file there? This lets me know if the drop is active to get my file there or not.

Can anyone help me?

HTML

    <div class="drop" >
      <div class="cont">
        <div class="browse" >
            Upload 
          </div>
      </div>
      <div class="abc">            
      </div>
        <input type="file" id="files" multiple accept="image/*">
    </div>

标签： angulartypescript

解决方案

使用 Angular 中的拖放事件：

<div (dragenter)="dropzoneHovered = true" (dragleave)="dropzoneHovered = false">

然后在你喜欢的元素上应用 CSS 类：

[class.drag-active]="dropzoneHovered"

例如：

.drag-active {
  background: red; 
}

你可以在这个 stackblitz中看到它的实际效果

推荐阅读