Dragable and Resizable div with angular

Question

I am trying to create resizable div containers and also they are dragable.

I used Angular material Drag and Drop and angular resizable element

Here is workaround https://stackblitz.com/edit/angular-syurbs?embed=1&file=src/polyfills.ts

But when I apply both, I can drag but I can't resize.

https://stackblitz.com/edit/angular-41rqyo?file=src%2Fapp%2Fapp.component.html

How can I achieve both in one?

Answer 1

Use cdkDragHandle directive on an icon or button <button cdkDragHandle>Drag Icon</button>

See the whole api here https://material.angular.io/cdk/drag-drop/api

Example: https://stackblitz.com/angular/jamgbjgmynoq

Answer 2

An Easy way to Create a Draggable & Resizable Angular Component

You can achieve the draggable and resizable component yourself without Angular Material. You need to do it in three steps.

1. Make a div resizable
2. Link mouse movement to the div’s position to make it draggable/movable
3. Add boundary restrictions to your mouse movements

The core of step (1) is to calculate the new div size by subtract mouse position(coordinates) and div’s position(left&top positions)

Step (2) requires calculating the movement of your mouse and add the same amount of movements to your div’s top & left position.

Step (3) you will need to calculate the outside container’s top, right, bottom and left boundaries’ position.

To get div element’s position, you need to use Web API - Element.getBoundingClientRect()

To get mouse positions you need to add a mouse move listener to the window and a mouse down listener to the div element itself.

I have written a post about how to achieve these three steps with further explanations and graphics. You can have a look if you are still not clear about how to achieve it.

Create a Resizable and Draggable Angular Component

Answer 3

You can add a hitbox element inside of your draggable, it should be slightly smaller and perfectly centered inside of your target element.

The blue area is the hitbox element. Now, apply a mouseenter and mouseleave events on the hitbox element respectively, and disable the dragging whenever your mouse is not on top of the hitbox element.