es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Angular Material CDK Arrastrar y Soltar Ajuste a la cuadrícula Elemento Interno cdkDragConstrainPosition @Input para el elemento dentro de la posición del elemento Arrastrar y Soltar.

Angular Material CDK Arrastrar y Soltar Ajuste a la cuadrícula Elemento Interno cdkDragConstrainPosition @Input para el elemento dentro de la posición del elemento Arrastrar y Soltar.

22 Jul, 2023 Programación

Cuando se utiliza la función de arrastrar y soltar a través de Angular Material CDK, permite “ajustarse a la cuadrícula” mediante [cdkDragConstrainPosition]="computedDragRenderPos"

Ejemplo:
html

... 

export class MyDraggableComponent {

constructor() {}

computeDragRenderPos(pos, dragRef) {
    return {x: Math.floor(pos.x / 30) * 30, y: pos.y}; // renderizará el elemento cada 30 píxeles horizontalmente
  }
}

Sin embargo, esto pasa la posición pos que es la posición del ratón. Entiendo que puedes pasar dragRef y obtener el getBoundingClientRect del elemento para obtener la posición x, pero tan pronto como lo pases a la función cdkDragConstrainPosition y cambies la posición del elemento, ya no funciona.

¿Cómo se mueve un elemento interno cada 30px… y no la posición del inicio del elemento?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mover un elemento interno cada 30 píxeles sin mover la posición de inicio del elemento, puedes usar la propiedad CSS transform para desplazar la posición del elemento desde su posición original.

    Primero, necesitas añadir una referencia al elemento que quieres mover usando ViewChild en el componente donde se define el elemento arrastrable.

    Ejemplo:

    import { Component, ViewChild, ElementRef } from '@angular/core';
import { CdkDrag } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-my-draggable-component',
  template: `
    <div cdkdrag="">
      <div #movableelement="">
        Este elemento se moverá
      </div>
    </div>
  `,
})
export class MyDraggableComponent {
  @ViewChild('movableElement') movableElementRef: ElementRef;

  constructor() {}

  computeDragRenderPos(pos, dragRef) {
    const draggableElement = dragRef.element.nativeElement;
    const movableElement = this.movableElementRef.nativeElement;
    const draggableRect = draggableElement.getBoundingClientRect();
    const movableRect = movableElement.getBoundingClientRect();
    const offsetX = movableRect.left - draggableRect.left;

    return {
      x: Math.round(pos.x / 30) * 30,
      y: pos.y - draggableRect.top,
      offsetX: offsetX,
    };
  }
}

    Luego, en el método computeDragRenderPos, puedes calcular la diferencia entre la posición del elemento arrastrable y la posición del elemento interno que quieres mover. Puedes usar esta diferencia para establecer la propiedad transform del elemento interno y moverlo en relación al elemento arrastrable.

    Ejemplo:

    computeDragRenderPos(pos, dragRef) {
  const draggableElement = dragRef.element.nativeElement;
  const movableElement = this.movableElementRef.nativeElement;
  const draggableRect = draggableElement.getBoundingClientRect();
  const movableRect = movableElement.getBoundingClientRect();
  const offsetX = movableRect.left - draggableRect.left;

  movableElement.style.transform = `translateX(${pos.x}px) translateY(${pos.y}px) translateX(${offsetX}px)`;

  return {
    x: Math.round(pos.x / 30) * 30,
    y: pos.y - draggableRect.top,
    offsetX: offsetX,
  };
}

    En este ejemplo, las propiedades translateX y translateY de transform se establecen en la posición del elemento arrastrable, mientras que la propiedad translateX también se establece en la diferencia entre el elemento arrastrable y el elemento interno. Esto moverá el elemento interno en relación al elemento arrastrable, permitiendo que el elemento arrastrable se ajuste a la cuadrícula.

Comments are closed.