Перетаскивание клона объекта фона - PullRequest
Новая
       4

Перетаскивание клона объекта фона

1 голос
/ 24 февраля 2020

Я пытаюсь реализовать перетаскивание HTML5 с кружком в другой. Когда я перетаскиваю круг, кажется, что у него есть клон перетаскиваемого объекта (круг с меньшей непрозрачностью). Когда круги обернуты в контейнер с фоновым цветом (в моем случае зеленым), перетаскиваемый круг получает фон, а при перетаскивании он окружается зеленым квадратом, который подчеркнут из родительского контейнера. Моя цель - перетаскивать круги внутри контейнера, но без зеленого квадрата вокруг них.

Вот мой код в stackblitz: https://stackblitz.com/edit/angular-2skzxn

Ответы [ 2 ]

1 голос
/ 25 февраля 2020

Правильный ответ здесь: 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)
}
0 голосов
/ 24 февраля 2020

То, что вы хотите, это настроить пользовательское призрачное изображение при использовании drag and drop .

Попробуйте это: 

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