Winkel 2 Drag & Drop kopiert Element

Question

ich in drag.ts einige Code auf Plunker haben>http://plnkr.co/edit/PITLKzBB6YXobR1gubOw?p=preview die impements & Drop ziehen

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'); 
    } 
} 

und einige Probleme mit ihm (es nur in getrennten Fenster Vorschau funktioniert):

1. wenn div gezogen wird, ist es doppelt - wie es zu beheben?
2. Wenn div gezogen wird, ändert sich der Cursor - wie auf Standard setzen?

Vielen Dank!

Answer 1

Sie können das native Drag-Image auf ein transparentes Bild einstellen, um die Duplizierung zu entfernen.

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; 
    } 

Sie etwas Ähnliches durch das Spielen Opazität Spiele erreichen könnte, aber ich vermute, sie könnten Cross-Browser Trouble (tm) sein.

Um den Cursor als etwas anderes als den deaktivierten Kreis erscheinen zu lassen, könnten Sie den moveEffect auf sich selbst setzen.

... 
<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(); 
    } 

Hier ist ein Plunker Demo: http://plnkr.co/edit/cGKcjxJGUKlWOC9GFyaJ?p=preview