角2拖放重複元件

Question

我有一些代碼對drag.ts plunker>http://plnkr.co/edit/PITLKzBB6YXobR1gubOw?p=preview其中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'); 
    } 
} 

和一些問題與它：

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設置爲自己。

... 
<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演示：http://plnkr.co/edit/cGKcjxJGUKlWOC9GFyaJ?p=preview