将图像拖放到特定区域答案

【问题标题】：Drop an image in a specific region将图像拖放到特定区域
【发布时间】：2020-06-28 19:06:09
【问题描述】：

我有一个图片库，我打算将这些图片拖放到拖放区。

我尝试在两种情况下使用它（使用鼠标拖动图像和使用允许我将图像移动到放置区域的 cdk 拖放）。

有没有办法从放置在放置区的图像中获取对象（名称、id ...）？我尝试将图像拖到放置区域，当我在那里释放它时，我想知道哪个图像被放置了。

有没有办法做到这一点？有人可以帮我吗？

非常感谢！

.TS

     onFileDropped($event) {
        this.prepareFilesList($event);
        console.log("evt", $event )

      }

      fileBrowseHandler(files) {
      this.prepareFilesList(files);
      }

      async prepareFilesList(files: Array<any>) {

      }

   @HostBinding('class.fileover') fileOver: boolean;
    @HostBinding('style.background-color') private background = '#f5fcff'
    @Output() fileDropped = new EventEmitter<any>();

    // Dragover listener
    @HostListener('dragover', ['$event']) onDragOver(evt) {
      evt.preventDefault();
      evt.stopPropagation();
      this.fileOver = true;
      this.background = '#9ecbec';
    }

    // Dragleave listener
    @HostListener('dragleave', ['$event']) public onDragLeave(evt) {
      evt.preventDefault();
      evt.stopPropagation();
      this.background = '#f5fcff'
      this.fileOver = false;
    }

    // Drop listener
    @HostListener('drop', ['$event']) public ondrop(evt) {
      evt.preventDefault();
      evt.stopPropagation();
      this.background = '#f5fcff'
      this.fileOver = false;
      let files = evt.dataTransfer.files;

      this.fileDropped.emit(files);

    }

使用图像 (cdkDrag) 我无法在放置区中获取任何检测到某物进入的事件。

使用普通图像，我能够执行该功能

 onFileDropped ($ event) {
    this.prepareFilesList ($ event);
    console.log ("evt", $ event)

  }

但我没有得到如图所示的结果。

【问题讨论】：

标签： angular typescript angular-material drag-and-drop angular-cdk-drag-drop

【解决方案1】：

一种可能性是在指令中创建一个@input 属性，并在组件的 mousedown 上为其赋值

dnd 指令

 @Input() data;

component.html

//add [data]="selectedProduct" 

     <div class="card-body">
          <div class="mycontainer" appDnd [data]="selectedProduct" (fileDropped)="onFileDropped(sle)">
              <div class="row" style="margin-left: 0; margin-right: 0; justify-content: center;">
                <span>Drop your items here.</span>   
              </div>
          </div>
        </div>

//add (mousedown)="assignSelectedProduct(product)"

    <ng-container *ngFor="let product of data; let  j = index;">
      <li class="mdc-image-list__item" (mousedown)="assignSelectedProduct(product)" >
        <div class="mdc-image-list__image-aspect-container">
          <ng-container *ngIf="product.image == null; else productImage">
            <img src="" class="mdc-image-list__image imagenotfound">
          </ng-container>
          <ng-template #productImage>
            <img [src]="product.image" class="mdc-image-list__image">
          </ng-template>
        </div>
        <div class="mdc-image-list--with-text-protection">
                    <div class="mdc-image-list__supporting mdc-image-list__supporting">
                        <span class="mdc-image-list__label">{{product.name}}</span>
                    </div>
                </div>
      </li>
    </ng-container>

组件.ts

selectedProduct; 

assignSelectedProduct(product){
  this.selectedproduct = product;
}

dnd 指令

  // Drop listener
  @HostListener('drop', ['$event']) public ondrop(evt) {
  console.log(this.data, 'data');
  }

【讨论】：

完美！谢谢！