vueどのようにドラッグしてコンポーネントのサイズを変更しますか？Vueコンポーネントは、ドラッグやサイズ調整が可能な要素です。

vueはどのようにドラッグしてコンポーネントのサイズを変えますか？
Vueドラッグでサイズ調整（Vue-drag-resize）
Vue Component for resize and drag elemens.
Vueコンポーネントは、サイズを調整したり、ドラッグしたりします。
View demoデモンストレーションDownload Sourceダウンロード元
特徴（Feature）

A lightweight、no-dependencyは軽くて、

に依存しません。

Use draggable、resizable or bothはドラッグ可能で、サイズを調整したり、

を同時に使用したりすることができます。

Define sticks for resizing定義棒はサイズを調整します。

Save aspect ratio for resizable componentsは、サイズ調整可能なコンポーネントのためのアスペクト比

を保存します。

Restict size and movement to parent element制限サイズと親要素

に移動

Restict drag to vertical or horizontal axis制限を垂直または水平軸

にドラッグします。
インストールと基本的な使い方（Install and baic usage）

$ npm i -s vue-drag-resize

Register the component:
登録コンポーネント:

import Vue from 'vue'
import VueDragResize from 'vue-drag-resize'

Vue.component('vue-drag-resize', VueDragResize)

Use the component:
コンポーネントを使う:

    import VueDragResize from 'vue-drag-resize';

    export default {
        name: 'app',

        components: {
            VueDragResize
        },

        data() {
            return {
                width: 0,
                height: 0,
                top: 0,
                left: 0
            }
        },

        methods: {
            resize(newRect) {
                this.width = newRect.width;
                this.height = newRect.height;
                this.top = newRect.top;
                this.left = newRect.left;
            }
        }
    }

アイテム（Props）
アクティブ(isActive)
Type：Boolean Required：false Default：falseタイプ：Boolean必須：falseデフォルト値：falseDetermines whether the component shuld be active.
コンポーネントがアクティブな状態にあるべきかどうかを判定します。

isDraggable(isDraggable)
Type：Boolean Required：false Default：trueタイプ：Boolean必須：falseデフォルト値：trueDetermines whether the component shuld draggable.
コンポーネントがドラッグすべきかどうかを決定します。

ISResizable
Type：Boolean Required：false Default：trueタイプ：Boolean必須：falseデフォルト値：trueDetermines whether the component shuld resize.
コンポーネントがサイズを調整すべきかどうかを決定します。

親制限（parent Limitation）
Type：Boolean Required：false Default：falseタイプ：Boolean必須：falseデフォルト値：falseLimits the scope of the component's change to its parent size.
コンポーネント変更の範囲を親サイズに制限します。

AsppectRatio(aspectRatio)
Type：Boolean Required：false Default：falseタイプ：Boolean必須：falseデフォルト値：falseDetermines whether the component shound retain its propotions.
コンポーネントがその比率を保持すべきかどうかを決定します。

w(w)
Type：Number Required：false Default：200タイプ：Number必須：falseデフォルト値：200Define the initial width of the component.
コンポーネントの初期幅を指定します。

H(h)
Type：Number Required：false Default：200タイプ：Number必須：falseデフォルト値：200Define the initial height of the component.
コンポーネントの初期高さを指定します。

w(minw)
Type：Number Required：false Default：50タイプ：Number必須：falseデフォルト値：50Define the minimal width of the component.
コンポーネントの最小幅を指定します。

h(minh)
Type：Number Required：false Default：50タイプ：Number必須：falseデフォルト値：50Define the minimal height of the component.
コンポーネントの最小高さを指定します。

X(x)
Type：Number Required：false Default：0タイプ：Number必須：falseデフォルト値：0Define the initial x position of the component.
コンポーネントの初期x位置を指定します。

湖南省にある地名
Type：Number Required：false Default：0タイプ：Number必須：falseデフォルト値：0Define the initial y position of the component.
コンポーネントの初期y位置を指定します。

ž （z）
Type：Number|String Required：false Default：autoタイプ：Number|String必須：falseデフォルト値：autoDefine the zIndex of the component.
コンポーネントのzIndexを定義します。

棍棒（sticks）
Type：Array Required：false Default：['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']タイプ：Array必須：falseデフォルト値：['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']Define the array of handles to restict the element resizing:
ハンドル配列を定義して要素のサイズ調整を制限します。

tl-Top left tl左上

tm-Top middle tm中高層

tr-Top right tr右上

mr-Middle right mr-右中

br-Bottom right br-右下

bm-Bottom middle bm底部中間

bl-Bottom left bl左下

ml-Middle left ml左中

軸(axis)
Type：String Required：false Default：bothタイプ：String必須：falseデフォルト値：bothDefine the axis on which the element is draggable.Available values are x、y、both or none.
ドラッグ可能な要素の軸を指定します。利用可能な値はx、y、both noneです。

大事記（Events）
アクティブ(activated)
Required：false Parameters：-必要：falseパラメータ：-Called whenever the component gets clicked，in order to show handles.
コンポーネントが表示されるたびに、このコンポーネントをクリックしてハンドルを呼び出します。

無効(deactivated)
Required：false Parameters：-必要：falseパラメータ：-Called whenever the user clicks anywhere out side the component，in order to deactivate it.
ユーザーがコンポーネントの外部のどの位置をクリックして、それを停止するたびに呼び出します。

サイズを調整します。
Required：false Parameters：object必要：falseパラメータ：object

{
    left: Number, //the X position of the component
    top: Number, //the Y position of the component
    width: Number, //the width of the component
    height: Number //the height of the component
}

Called whenever the component gets resized.
調整コンポーネントが大きいたびに呼び出します。

サイズを調整します。
Required：false Parameters：object必要：falseパラメータ：object

{
    left: Number, //the X position of the component
    top: Number, //the Y position of the component
    width: Number, //the width of the component
    height: Number //the height of the component
}

Called whenever the component stops getting resized.
コンポーネントが停止するたびに、大きい時間で呼び出します。

ドラッグ(dragging)
Required：false Parameters：object必要：falseパラメータ：object

{
    left: Number, //the X position of the component
    top: Number, //the Y position of the component
    width: Number, //the width of the component
    height: Number //the height of the component
}

Called whenever the component gets dragged.
コンポーネントをドラッグするたびに呼び出します。

ドラッグ停止（dragstop）
Required：false Parameters：object必要：falseパラメータ：object

{
    left: Number, //the X position of the component
    top: Number, //the Y position of the component
    width: Number, //the width of the component
    height: Number //the height of the component
}

Called whenever the component stops getting dragged.
コンポーネントがドラッグを停止するたびに呼び出します。

貢献（Conttributing）
Any contribution to the code or any parth of the documentation and any idea/or suggaestion are very welcome.
コードまたはドキュメントの任意の部分に貢献することを歓迎し、任意のアイデアと/または提案を提出します。

# serve with hot reload at localhost:8081
npm run start

# distribution build
npm run build

翻訳元:https://vuejsexamples.com/vue-component-for-draggable-and-resizable-elements/
vueはどのようにドラッグしてコンポーネントのサイズを変えますか？