Arrastrar en un div redimensionable en Angular.

28 Jul, 2023 Programación 0

Tengo un div redimensionable en el que debo mantener la relación de aspecto. Lo que debo hacer ahora es implementar la funcionalidad de arrastrar. Esto es lo que he hecho hasta ahora.

https://stackblitz.com/edit/icon-font-awesome-h3mzgc?file=src/app/app.component.ts

Puedo arrastrarlo, también puedo cambiar el tamaño, pero no funciona muy bien. En primer lugar, crece solo en altura y anchura. En segundo lugar, crece píxel a píxel sin seguir el movimiento del ratón. He intentado usar esta parte de código para la parte de arrastrar y también para la parte de cambiar el tamaño.

https://github.com/theideasaler/angular-resizable-draggable/blob/master/src/app/resizable-draggable/resizable-draggable.component.ts

La función de arrastrar es la siguiente:

dragEvent(event: MouseEvent, status: number) {
console.log(event, status)
if(status === 1) {
event.stopPropagation();
} else if(status === 2) {
this.mouseClick = { x: event.clientX, y: event.clientY, left: this.left, top: this.top };
} else {
this.loadBox()
};

this.status = status;
}

Y he intentado usar el evento mousemove de esta manera:

@HostListener(‘window:mousemove’, [‘$event’])
onMouseMove(event: MouseEvent){
this.mouse = { x: event.clientX, y: event.clientY };

if(this.status === Status.RESIZE) this.resize(event);
else if(this.status === Status.MOVE) this.move();
}

private resize(e){
if(this.resizeCondMeet()){
let pageX;
const diff = isNaN(pageX) ? 1 : e.pageX – pageX;
const minSize = 10;

  if (
    (this.width + diff < minSize || this.height + diff < minSize) &&
    diff < 0
  ) {
    return;
  }

  this.width = this.width + diff;
  this.height = this.height + diff;

  pageX = e.pageX;

}
}

Pero no está funcionando. ¿Puede alguien ayudarme?

davy.ai

July 28, 2023 at 6:11 am

Como experto en IT especializado en Angular, TypeScript, redimensionamiento, arrastrable y relación de aspecto, aquí tienes algunas sugerencias para solucionar el problema:

Para mantener la relación de aspecto del div redimensionable, puedes calcular la relación de aspecto del div y luego establecer la altura y el ancho en función de la relación de aspecto al redimensionar. Aquí tienes un ejemplo de código que puedes modificar y utilizar:

private resize(e) {
  if(this.resizeCondMeet()) {
    let pageX, aspectRatio;
    const diff = isNaN(pageX) ? 1 : e.pageX - pageX;
    const minSize = 10;

    aspectRatio = this.width / this.height;

    if (
      (this.width + diff < minSize || this.height + diff < minSize) &&
      diff < 0
    ) {
      return;
    }

    this.width = this.width + diff;
    this.height = Math.round(this.width / aspectRatio);

    pageX = e.pageX;
  }
}

Para hacer que el div redimensionable crezca según el movimiento del ratón, puedes calcular la diferencia entre la posición actual del ratón y la posición inicial del ratón al redimensionar, y luego establecer la altura y el ancho en función de la diferencia. Aquí tienes un ejemplo de código que puedes modificar y utilizar:

private resize(e) {
  if(this.resizeCondMeet()) {
    let aspectRatio;
    const initX = this.mouseClick.x;
    const initY = this.mouseClick.y;
    const diffX = e.clientX - initX;
    const diffY = e.clientY - initY;
    const minSize = 10;

    aspectRatio = this.width / this.height;

    if (
      (this.width + diffX < minSize || this.height + diffY < minSize) &&
      diffX < 0 && diffY < 0
    ) {
      return;
    }

    this.width = this.width + diffX;
    this.height = Math.round(this.width / aspectRatio);

    this.mouseClick = { x: e.clientX, y: e.clientY, left: this.left, top: this.top };
  }
}

Para hacer que el div redimensionable crezca tanto en altura como en anchura, puedes modificar la función de redimensionamiento para calcular la relación de aspecto y luego utilizar la diferencia máxima entre la posición actual del ratón y la posición inicial del ratón al redimensionar. Aquí tienes un ejemplo de código que puedes modificar y utilizar:

private resize(e) {
  if(this.resizeCondMeet()) {
    let aspectRatio;
    const initX = this.mouseClick.x;
    const initY = this.mouseClick.y;
    const diffX = e.clientX - initX;
    const diffY = e.clientY - initY;
    const minSize = 10;

    aspectRatio = this.width / this.height;

    if (
      (this.width + diffX < minSize || this.height + diffY < minSize) &&
      diffX < 0 && diffY < 0
    ) {
      return;
    }

    if (Math.abs(diffX) > Math.abs(diffY)) {
      this.width = this.width + diffX;
      this.height = Math.round(this.width / aspectRatio);
    } else {
      this.height = this.height + diffY;
      this.width = Math.round(this.height * aspectRatio);
    }

    this.mouseClick = { x: e.clientX, y: e.clientY, left: this.left, top: this.top };
  }
}

¡Espero que esto te ayude!

es.davy.ai

¿Tienes una pregunta?

Arrastrar en un div redimensionable en Angular.

Answer

davy.ai