Question

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

我试图在两种情况下使用它（使用鼠标拖动图像，以及使用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)

  }

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

DEMO - STACKBLITZ

Answer 1

一种可能性是在指令中创建一个@input属性，并在从组件上按下鼠标时为其赋值

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>

component.ts

selectedProduct; 

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

dnd指令

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

将图像拖放到特定区域

1 个答案: