拖放克隆对象背景

Question

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

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

Answer 1

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

试试这个：

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

Answer 2

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

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

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

拖放克隆对象背景

Drag and Drop clone object background

html

drag-and-drop

angular