拖放克隆对象背景答案

【问题标题】：Drag and Drop clone object background拖放克隆对象背景
【发布时间】：2020-02-24 13:33:47
【问题描述】：

我正在尝试将 HTML5 与一个圆圈拖放到另一个圆圈中。当我拖动圆圈时，它似乎具有可拖动对象的克隆（不透明度较小的圆圈）。当圆圈被包裹在具有背景颜色（在我的情况下为绿色）的容器中时，被拖动的圆圈将获得它的背景，并且当被拖动时，它被一个在其父容器下划线的绿色正方形包围。我的目标是能够拖动容器内的圆圈，但没有围绕它们的绿色方块。

这是我在 stackblitz 中的代码： https://stackblitz.com/edit/angular-2skzxn

【问题讨论】：

标签： html angular drag-and-drop

【解决方案1】：

正确答案在这里： https://github.com/react-dnd/react-dnd/issues/788

简而言之 - 这似乎是一个问题铬。要解决此问题，请将“transform: translate(0,0)”添加到您圈子的样式中：

.circle {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background: red;
    transform: translate(0,0)
}

【讨论】：

【解决方案2】：

您想要的是在使用拖放时设置自定义幻像。

试试这个：

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

@Component({
  selector: 'app-circle',
  templateUrl: './circle.component.html',
  styleUrls: ['./circle.component.css']
})
export class CircleComponent implements OnInit {
  static id=0;
  constructor( private elementRef: ElementRef ) {}
  data = '' + (CircleComponent.id++);
  isHoveringAboveArea = false;


  ngOnInit(): void {
  }

  handleDragStart(event: DragEvent) {
    console.log(event);
    event.dataTransfer.setData('text', this.data);
    let crt = this.elementRef.nativeElement.cloneNode(true);
    crt.style.backgroundColor = "red";
    event.dataTransfer.setDragImage(crt, 0, 0); // Here's the magic line
  }

  drop (event: DragEvent) {
    console.log("droped " + event.dataTransfer.getData('text') + " over " + this.data);
  }

  onDragLeave(event) {
    this.isHoveringAboveArea = false;
  }

  dragover(event: DragEvent) {
    // console.log("over: ", event);
    event.preventDefault();
    this.isHoveringAboveArea = true;
  }
}

【讨论】：