角度2ドラッグ＆ドロップ重複要素

Question

私はdrag.tsでplunkerにいくつかのコードを持っている> impementsは（それが唯一の分離ウィンドウプレビューで動作します）

import {Component, OnInit, ElementRef, Renderer} from '@angular/core' 

@Component({ 
    selector: 'my-drag', 
    template: ` 
    <div class="drag" 
     draggable="true" 
     (dragstart)="onDragStart($event)" 
     (dragend)="onDragEnd($event)" 
     (drag)="onDrag($event)"> 
     drag 
    </div> 
    `, 
    styles: ['.drag {width: 50px; height: 50px; border: 1px solid black; background-color: red;}'] 
}) 
export class DragComponent implements OnInit { 
    private dx: number = 0; 
    private dy: number = 0; 

    constructor(private el: ElementRef, private renderer: Renderer) { } 

    ngOnInit() { 
    this.renderer.setElementStyle(this.el.nativeElement, 'position', 'absolute'); 
    } 

    onDragStart(event: MouseEvent) { 
    this.dx = event.x - this.el.nativeElement.offsetLeft; 
    this.dy = event.y - this.el.nativeElement.offsetTop; 
    } 

    onDrag(event: MouseEvent) { 
    this.move(event.x, event.y); 
    this.renderer.setElementAttribute(this.el.nativeElement, 'draggable', 'false'); 
    } 

    onDragEnd(event: MouseEvent) { 
    this.dx = 0; 
    this.dy = 0; 
    } 

    move(x: number, y: number) { 
    if (!x || !y) return; 

    this.renderer.setElementStyle(this.el.nativeElement, 'top', (y - this.dy) + 'px'); 
    this.renderer.setElementStyle(this.el.nativeElement, 'left', (x - this.dx) + 'px'); 
    } 
} 

、それにいくつかの問題&ドロップをドラッグhttp://plnkr.co/edit/PITLKzBB6YXobR1gubOw?p=preview：

1. divをドラッグすると、後ろに複製されます - それを修正する方法は？
2. divをドラッグすると、カーソルが変更されます - デフォルトに設定するには？

ありがとうございます！

Answer 1

ネイティブドラッグイメージを透過イメージに設定して、複製を削除することができます。

onDragStart(event: MouseEvent) { 
    var dragImgEl = document.createElement('img'); 
    dragImgEl.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; // Creates a minimal transparent image 
    event.dataTransfer.setDragImage(dragImgEl, 0, 0); 

    this.dx = event.x - this.el.nativeElement.offsetLeft; 
    this.dy = event.y - this.el.nativeElement.offsetTop; 
    } 

不透明度のゲームを再生することで同様の効果を得ることができますが、クロスブラウザのトラブル（tm）の可能性があります。

カーソルが無効円以外のものとして表示されるようにするには、moveEffect自体を設定します。 http://plnkr.co/edit/cGKcjxJGUKlWOC9GFyaJ?p=preview

：ここ

... 
<div class="drag" 
     draggable="true" 
     (dragstart)="onDragStart($event)" 
     (dragend)="onDragEnd($event)" 
     (drag)="onDrag($event)" 
     (dragover)="ondragover($event)"> 
     drag 
    </div> 
... 

onDragStart(event: MouseEvent) { 
    .. 
    event.dataTransfer.effectAllowed = 'move'; 
    ... 
    } 

ondragover(mouseEv: MouseEvent){ 
    mouseEv.dataTransfer.effectAllowed = 'move'; 
    mouseEv.preventDefault(); 
    } 

はplunkerのデモです