Question 263111 in Html Question posted in
Some basic documentation can be found here.

Html – ng-image-viewer cant move image which is under drag-scroll

ng-image-viewer could not move the image inside a parent element which is drag-scroll

Here is my HTML code:

<drag-scroll class="drag-box" style="width: 100%;" #nav>

Inside this drag scroll i have this ng-image-viewer element

<ng-image-viewer class="responsive" [src]="[images]"></ng-image-viewer>

Here are my css code:

.responsive {
  width: 100%;
}

@media screen and (max-width: 1366px) {
 .drag-box {
   width: 1080px;
 }
}

Normally i could drag it by double clicking the image and move around, But now that dragging event is taken for its parent element which is drag-scroll.

I want that image to move around when double click on it.

Tags:

2

Answers


  1. 0

    What we need to do to make that draggable.

    Add a (dblclick) event listener to the ng-image-viewer element.

    In the event listener, prevent the default behavior of the event.

    Get the offsetLeft and offsetTop properties of the ng-image-viewer element.

    Set the left and top CSS properties of the ng-image-viewer element to the offsetLeft and offsetTop properties, respectively.

    Add a mousemove event listener to the document.

    In the mousemove event listener, update the left and top CSS properties of the ng-image-viewer element based on the current mouse position.

    Remove the mousemove event listener when the mouse button is released.

    Update TypeScript:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  images = ['example/image1.jpg', 'example/image2.jpg'];

  constructor() { }

  ngOnInit() { }

onImageDblClick(event: MouseEvent) {
    event.preventDefault();

    // Get the offsetLeft and offsetTop properties of the ng-image-viewer element.
    const offsetLeft = event.target.offsetLeft;
    const offsetTop = event.target.offsetTop;

    // Set the left and top CSS properties of the ng-image-viewer element to the offsetLeft and offsetTop properties, respectively.
    event.target.style.left = offsetLeft + 'px';
    event.target.style.top = offsetTop + 'px';

    // Add a mousemove event listener to the document.
    document.addEventListener('mousemove', this.onDocumentMouseMove);

    // Add a mouseup event listener to the document.
    document.addEventListener('mouseup', this.onDocumentMouseUp);
  }

  onDocumentMouseMove(event: MouseEvent) {
    // Update the left and top CSS properties of the ng-image-viewer element based on the current mouse position.
    event.target.style.left = event.clientX + 'px';
    event.target.style.top = event.clientY + 'px';
  }

  onDocumentMouseUp(event: MouseEvent) {
    // Remove the mousemove event listener.
    document.removeEventListener('mousemove', this.onDocumentMouseMove);
  }
}

    Update HTML:

    <ng-image-viewer class="responsive" [src]="[images]" (dblclick)="onImageDblClick($event)"></ng-image-viewer>

    Updated CSS:

    .responsive {
  width: 100%;
  position: absolute;
  border: 1px solid black;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

    This will make the image in the ng-image-viewer element draggable when double-clicked, even if it is inside a drag-scroll element.

    Login or Signup to reply.
  2. 0

    ng-image-viewer allows users to zoom in/out and drag the image for a better view. However, if the image is placed inside a parent element that has a dragging function, like drag-scroll, the drag event will be applied to the parent element instead, causing the image to be immovable.

    To solve this issue, we can disable the dragging function of the parent element when the user double clicks on the image. This can be achieved by adding a double click event listener to the ng-image-viewer element and calling the stopPropagation() method to prevent the event from bubbling up to the parent element.

    HTML:

    <drag-scroll class="drag-box" style="width: 100%;" #nav>
  <ng-image-viewer class="responsive" [src]="[images]" (dblclick)="onDoubleClick($event)"></ng-image-viewer>
</drag-scroll>

    Component.ts file:

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

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent {
  @ViewChild('nav') nav: ElementRef;

  onDoubleClick(event: any) {
    // Prevent the event from bubbling up to the parent element
    event.stopPropagation();

    // Disable the dragging function of the parent element
    this.nav.nativeElement.draggable = false;
  }
}

    Now, when the user double clicks on the image, the drag event will not be applied to the parent element, allowing the image to be dragged and moved around.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search