随意div大小拖动组件_以最简单的方式创建可调整大小和可拖动的角度组件

随意div大小拖动组件

A resizable and draggable HTML div element can add more possibilities into your website by allowing you to make more flexible components, such as a draggable back-to-top button, a resizable calendar, a movable video window and etc.

可调整大小和可拖动HTML div元素可以允许您制作更灵活的组件，例如可拖动的自上而下的按钮，可调整大小的日历，可移动的视频窗口等，从而可以为您的网站增加更多的可能性。

In this post, we will go through the process of making a resizable and draggable component step by step with less than 100 lines of code. The structure of this article is shown below:

在本文中，我们将逐步使用不到100行的代码逐步制作可调整大小和可拖动的组件。 本文的结构如下所示：

1. Create a resizable component
   创建一个可调整大小的组件
2. Make the component draggable
   使组件可拖动
3. Add boundary restrictions into moving & resizing actions
   在移动和调整大小的动作中添加边界限制

View details in my github repo: angular-resizable-draggable.

在我的github repo中查看详细信息： angular-resizable-draggable 。

1.创建可调整大小的组件 (1. Create a resizable component)

1.1组件初始化 (1.1 Component Initialization)

As part of the initial settings, I have initialized an Angular project with a 600x450px container for the component we are going to make.

作为初始设置的一部分，我已经为要制作的组件初始化了一个600x450px容器的Angular项目。

After that, we need to initialize a resizable-draggable component and pass some initial @Input values into the component, and bind them with the component’s style.

之后，我们需要初始化一个可调整大小的可拖动组件，并将一些初始@Input值传递给组件，然后将其与组件的样式绑定。

Initialize Component

初始化组件

app.component.html

app.component.html

<app-resizable-draggable 
[width]="300" 
[height]="150" 
[left]="100" 
[top]="100">
</app-resizable-draggable>

resizable-draggable.component.ts

resizable-draggable.component.ts

@Input('width') public width: number;
@Input('height') public height: number;
@Input('left') public left: number;
@Input