web-dev-qa-db-ja.com

HTML 5でのドラッグアンドドロップAngular 4

私はangularアプリでネイティブHTML 5のドラッグアンドドロップを動作させようとしています。ここに、以下のHTMLおよびドラッグイベントコードがあります。

<ul *ngFor="let channel of channelList" >
      <li class="list-group-item" *ngIf="channel.channel.substr(0, 1) === head" 
      style="float:left; margin:0.5px" draggable="true" (dragstart)="drag(channel)">
        <ng-container *ngIf="channel.compChannel.compChannelLogo.length !== 0; else noCompChannel">
          <img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}" width="100" height="100">
          <img class="img-rounded" src="{{ channel.compChannel.compChannelLogo }}" alt="{{ channel.channel.compChannelName }}" width="100" height="100">
        </ng-container>
        <ng-template #noCompChannel>
          <img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}" 
          width="100" height="100" >
        </ng-template>
      </li>
    </ul>
<ul class="list-group" *ngFor="let channels of currentPickSelection" dropzone="copy">
  <li class="list-group-item" style="float:Left; margin-left:0.5px" (dragover)="dragOver(channels[0])" (dragend)="drop(event)">
    <ng-container *ngIf="channels[0].compChannel.compChannelLogo.length !== 0; else noCompChannel">
      <img class="img-rounded" src="{{ channels[0].logo }}" alt="{{ channels[0].channel }}" width="70" height="70">
      <img class="img-rounded" src="{{ channels[0].compChannel.compChannelLogo }}" alt="{{ channels[0].compChannel.compChannelName }}"
        width="70" height="70">
    </ng-container>
    <ng-template #noCompChannel>
      <img class="img-rounded" src="{{ channels[0].logo }}" alt="{{ channels[0].channel }}" width="70" height="70">
    </ng-template>
    <br>
    <strong>
      <font size="2">{{ channels[0].pickCode }}</font>
    </strong>
  </li>
</ul>



drag(channel) {
    console.log(channel);
  }
  dragOver(channel) {
    this.draggedChannel = channel;
    // console.log(this.draggedChannel);
  }

  drop(e) {
    console.log(e);
  }
htmlangulartypescriptdrag-and-drop
8
Sumchans

Angular 2/4/5/6で他のモジュールなしで作成しました。以下のコードを使用して作成することもできます：

drag.component.html：

<h2>Drag and Drop demo</h2>
<div  id="div1" 
      (drop)="drop($event)" 
      (dragover)="allowDrop($event)">

      <img 
      src="https://images.pexels.com/photos/658687/pexels-photo-658687.jpeg?auto=compress&cs=tinysrgb&h=350" 
      draggable="true" 
      (dragstart)="drag($event)" 
      id="drag1"
      width="88" 
      height="31">
</div>

<div id="div2" 
  (drop)="drop($event)" 
  (dragover)="allowDrop($event)">
</div>

drag.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'drag-root',
  templateUrl: './drag.component.html',
  styleUrls: ['./drag.component.css']
})
export class AppComponent {

  drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
  }

  allowDrop(ev) {
    ev.preventDefault();
  }

  drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
  }
}

drag.component.css：

#div1, #div2 {
    float: left;
    width: 100px;
    height: 35px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}

Stackblitzの例

14
Shubham Verma
<div (dragover)="onDragOver($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)">

コンポーネント内

onDrop(event: any) {
    event.preventDefault();
    event.stopPropagation();
    // your code goes here after droping files or any
    }

    onDragOver(evt) {
     evt.preventDefault();
     evt.stopPropagation();
    }

   onDragLeave(evt) {
     evt.preventDefault();
     evt.stopPropagation();
    }
5
Phani Kumar

シンプルだが最も強力なパッケージ

サポートangular version> = 4.x

ドキュメント

デモ

それを使用する方法？

インストール

// if you use npm
npm install angular2-draggable

// or if you use yarn
yarn add angular2-draggable

インポート

import { AngularDraggableModule } from 'angular2-draggable';

@NgModule({
  imports: [
    ...,
    AngularDraggableModule
  ],
})
export class AppModule { }

そして最後に使用する

// Basic Usage
<div ngDraggable>Drag Me!</div>
1
WasiF

angular 4アプリケーションでドラッグアンドドロップを使用するには、npmモジュール "ngx-uploader"を使用できます。

以下のリンクから統合手順が見つかります。

https://www.npmjs.com/package/ngx-uploader

上記のリンクから取得できるすべてのimportsパラメーターとクラス。

角度の私のコードは次のとおりです。

if (output.type === 'allAddedToQueue') { // when all files added in queue
  // uncomment this if you want to auto upload files when added
  const event: UploadInput = {
    type: 'uploadAll',
    url: API_BASE +'/api/uploads',

    method: 'POST',
    data:{total_files: this.files.length.toString()}
  };
  this.uploadInput.emit(event);
} else if (output.type === 'addedToQueue'  && typeof output.file !== 'undefined') { // add file to array when added
  this.files.Push(output.file);
} else if (output.type === 'uploading' && typeof output.file !== 'undefined') {
  // update current data in files array for uploading file
  const index = this.files.findIndex(file => typeof output.file !== 'undefined' && file.id === output.file.id);
  this.files[index] = output.file;

} else if (output.type === 'removed') {
  // remove file from array when removed
  this.files = this.files.filter((file: UploadFile) => file !== output.file);
} else if (output.type === 'dragOver') {
  this.dragOver = true;
} else if (output.type === 'dragOut') {
  this.dragOver = false;
} else if (output.type === 'drop') {
  this.dragOver = false;
}else if (output.type === 'done') { 

  if (output.file.response.status == 200) { 
    var uploaded_files = output.file.response.data;
    this.propertyImage.Push(uploaded_files);
  } 
  else { 
    this.msgs = [];
    this.msgs.Push({ severity: 'error', summary: 'Error Message', detail: 'unable to upload images' });
  }

上記のoutput === doneのコードでは、サーバー側から応答が返されます（私の場合、nodejs）

以下に、バックエンドのコードを示します。

var formidable = require('formidable'),
    http = require('http'),
    util = require('util');

var form = new formidable.IncomingForm();

var src = './public/images/properties';
var dst_small = './public/images/properties/small'
var dst_medium = './public/images/properties/medium'
var validImage = false;
form.keepExtensions = true; //keep file extension
form.uploadDir = src;
form.onPart = function (part) {
    if (!part.filename || part.filename.match(/\.(jpg|jpeg|png)$/i)) {
        validImage = true;
        this.handlePart(part);
    }

    else {
        validImage = false;
        return res.json({ status: 404, msg: part.filename + ' is not allowed.' });

    }
}
form.parse(req, function (err, fields, files) {
    if (validImage) {

        var image = files.file.path.split("/")[3];
        var name = files.file.path.split("/")[3];


        easyimg.rescrop({
            src: files.file.path, dst: dst_small + '/' + files.file.path.split('/')[3],
            width: 100, height: 100,
            cropwidth: 100, cropheight: 100,
            x: 0, y: 0
        }).then(
            function (image) {
                //  console.log('Resized and cropped: ' + image.width + ' x ' + image.height);
            },
            function (err) {
                //  console.log(err);
            }
            );


        // for largeImage
        easyimg.rescrop({
            src: files.file.path, dst: dst_medium + '/' + files.file.path.split('/')[3],
            width: 300, height: 300,
            cropwidth: 300, cropheight: 300,
            x: 0, y: 0
        }).then(
            function (image) {
                //  console.log('Resized and cropped: ' + image.width + ' x ' + image.height);
                return res.json({ status: 200, msg: 'Uploaded images', data: image });

            },
            function (err) {
                console.log(err);
            }
            );
    } else {
        return res.json({ status: 500, msg: constant.message.error_profile_pic_type });
    }
});

ファイルパスに従ってイメージパスを変更してください。私はこのコードを使用しましたが、うまくいきました。

上記のコードがお役に立てば幸いです。

ありがとう!!

1
Rsona

次に、Angular 7の解決策を示します。

Material（ https://material.angular.io/ ）は完全に説明しています（バージョンを取得する必要があります> =7.1）。 [〜＃〜] api [〜＃〜] へのリンクです。

まず、モジュールに「DragAndDrop」モジュールをインポートします。

import {DragDropModule} from '@angular/cdk/drag-drop';

次に、「cdkDrag」ディレクティブをHTML要素に追加するだけです。

<div class="example-box" cdkDrag>
  Drag me around
</div>

Stackblitz（素材から）： ここ

使い方は本当に簡単で、より具体的なドラッグアンドドロップ（位置ロックなど）を行う必要がある場合は、興味深いオプションがあります。

1
Curse

drop eventを使用します。これは、ファイルをドロップしたときにのみ起動します。

0
sachin

これは私がそれを動作させる方法です。 preventDefault（）関数はエラーをスローし、falseを返すように変更しましたが、正常に機能しました。迅速な対応に感謝します。

 drag(channel) {
    console.log(channel);
  }
  onDragOver(channel: any) {
    console.log("Drag Over");
    return false;
  }
  onDrop(e:any) {
    console.log("Drop");
  }
0
Sumchans