角度2拖放重复元素答案

【问题标题】：angular 2 drag&drop duplicated element角度2拖放重复元素
【发布时间】：2016-11-07 18:34:01
【问题描述】：

我在 drag.ts 中有一些关于 plunker 的代码 > http://plnkr.co/edit/PITLKzBB6YXobR1gubOw?p=preview 会阻碍拖放（它仅适用于单独的窗口预览）

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

还有一些问题：

div被拖到后面出现重复-如何解决？
当 div 被拖动时，光标会发生变化 - 如何将其设置为默认值？

谢谢大家！

【问题讨论】：

标签： angular typescript drag-and-drop

【解决方案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

【讨论】：