Перетащите изображение в заданный c регион - PullRequest
Новая
       39

Перетащите изображение в заданный c регион

1 голос
/ 17 марта 2020

У меня есть галерея изображений, и я намерен перетащить эти изображения в зону перетаскивания.

Я пытался использовать ее в двух случаях (с помощью мыши перетащите изображение и с помощью cdk drag & drop, который позволяет мне перемещать изображение и в область перетаскивания.)

Есть ли способ получить объект (name, id ...) из изображения, которое сбрасывается в зоне перетаскивания? Я пытаюсь перетащить изображение в зону перетаскивания, и когда я выпускаю его туда, я хочу знать, какое изображение было отброшено.

Есть ли способ добиться этого? Кто-нибудь может мне помочь?

Большое спасибо!

DEMO - STACKBLITZ

.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)

  }

но я не получил результатов, как показано на рисунке.

image

1 Ответ

1 голос
/ 17 марта 2020

Одной из возможностей является создание свойства @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>

component.ts 

selectedProduct; 

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

dnd директива 

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