スケーリングVUEは、要約を使用VUE-ドラッグ・サイズ変更が可能なコンポーネントをドラッグすることができます

機能

頼りありません

使用すると、ドラッグ、サイズ変更、またはその両方ができ
サイズ変更ハンドルの定義
親要素の大きさを制限し、移動したり、カスタムセレクタに
カスタムグリッドへの捕捉要素
垂直または水平軸に限定されるものでドラッグ
アスペクト比を維持
タッチ機能を有効にします
独自のスタイルを使用します
処理するために、独自のスタイルを提供します

インストールと基本的な使い方

NPM --saveインストールVUEを-ドラッグ、サイズ変更可能

グローバル登録コンポーネントでmain.jsを書きます：

'VUE'からインポートヴュー
からの輸入VueDraggableResizable 'VUE-ドラッグサイズ変更が可能な' // 可选择导入默认样式 
インポート'VUE-ドラッグサイズ変更可能/ DIST / VueDraggableResizable.css' 
Vue.component（ 'VUE-ドラッグ・サイズ変更が可能な'、VueDraggableResizable ）

ローカル登録：で使用される参照されるコンポーネント

'VUE-ドラッグサイズ変更可能'からインポートVueDraggableResizable 
インポート 'VUE-ドラッグサイズ変更可能/ DIST / VueDraggableResizable.css'

共通するのは、要約属性

：Wデフォルト幅
：Hのデフォルトの高さ
：X =「50」水平注意相対元素デフォルト座標
：Y =「50」をデフォルトで述べ最外側垂直相対元素
：分 -width =「50」最小幅
：分 -高さ =「50」最小の高さ
：親 =「trueには、」親要素のうち抑制
 親 =クラス制限はP-のうちない「P-イベント」イベントの要素
：グリッドの数を取る各々ができ、それぞれ、水平方向および垂直方向に移動画素
 クラス -nameカスタムコンポーネントクラス以下はdragging1を定義します

一般的なイベント概要

イベント説明書（クリック可能なダイレクトアクセス）「イベント」詳細ビューのイベントパラメータのためのCtrl + Fキー検索では 
 
、この例では、デモで詳しく説明されていません
@ ドラッグ =「onDrag」  するたびにドラッグ・コンポーネントの呼び出しを。
@ リサイズ =「さらにonResize」コンポーネントのサイズを変更するたびに呼び出されます。

このデモでは、使用しても無駄かもしれ
@のDragStop =「onDragstop」いつでもコンポーネント停止ドラッグ呼び出されます。
@ Resizestop =「onResizstop」コンポーネントは、サイズ変更時に呼び出しを停止するたびに
@ 非アクティブ =「onDeactivated」ユーザーが呼び出すコンポーネント以外の場所をクリックするたびに
、@ アクティブにハンドルを表示するには、コンポーネントをクリックし、「onActivated」ときに呼び出されます=。注：ハンドルが垂直および水平成分であるポイントを伸ばしボックスをクリックすることができます

例えば

VUEテンプレートコード

  < DIV クラス= "helloword" > 
    < DIV クラス= "テキストイベント" > 
      < VUE-ドラッグ、サイズ変更可能
         ：W = "150" 
        ：H = "150" 
        ：X = "50" 
        、Y = "50" 
        ：分-width = "50" 
        ：高さ分= "50" 
        親：= "TRUE" 
        ：グリッド= "[10,10]" 
        クラス名= "dragging1" 
        @dragging = "onDrag" 
        @resizing = "さらにonResize"
      > 
        < P >
          こんにちは！私は柔軟なコンポーネントです。あなたは私のサイズを調整することができ、私の周りをドラッグすることができます。
          < のBr /> 
          X-：{{X}} / Y：{{Y}} -幅：{{幅}} /身長：{{高}} 
        </ P > 
      </ VUE-ドラッグと、サイズ変更可能な> 
    </ DIV > 

    <！ - クラスは、ドラッグマークに等しいものに相対指定の親に注意してください- > 
    < divのクラス=「P -イベント」> 
      < VUE-ドラッグして、サイズ変更が可能な 
       親を。「pは-イベント」= 
      > 
        < p型>あなたによってCANそして私の周りのサイズ変更は、私はあなたがAS願いをドラッグします。</ P > 
      <
    DIV > 
  </ DIV >

VUEスクリプトコード

エクスポートデフォルト{ 
  名： "HelloWorldの" 、
  データ：関数（）{
     リターン{ 
      幅： 0 、
      高さ： 0 、
      X： 0 、
      Y： 0 
    }。
  }、
  メソッド：{ 
    さらにonResize：関数（X、Y、幅、高さ）{
       この .X = X。
      この .Y = Y。
      この .width = 幅;
      この .height = 高さ; 
    }、
    onDrag。関数（X、Y）{
       この .X = X。
      この .Y = Y。
    } 
  } 
}。

カスケーディング・スタイルコードVUE

.helloword { 
  オーバーフロー：隠されました。
} 
の.textイベント { 
  フロート：左 ; 
  高さ：500pxなど。
  幅：500pxなど。
  国境：1pxの固体赤。
  位置：相対 ;

　　/ *グリッドの設定* /

　　背景：リニアグラジエント（-90deg、RGBA（0、0、0、0.1）1ピクセル、1ピクセル透明）0％0％/ 10pxの10pxの、線形勾配（RGBA（0、0、0、0.1）1ピクセル、透明な1ピクセル）0％0％/ 10pxの10pxの。

} 
.P-イベント { 
  フロート：左 ; 
  高さ：300ピクセル ; 
  幅：300ピクセル ; 
  国境：1pxのソリッドブルー ; 
  位置：相対 ; 
  余白左：20ピクセル ; 
} 

.dragging1 { 
  ボーダー：1ピクセル固体＃000。
  色：＃000 ; 
}

動作結果：両方が要素自体に設定された限度を超えてはなりません

グリッド：::グリッドは各属性は、ピクセルの数を制御する運動をドラッグすることによって、グリッドメッシュ幅及び10個のピクセルの高さを設定する[10、10]
高さ幅を調整するために、ハンドルアセンブリを表示します
ドラッグしてアセンブリをリアルタイム幅高さのデータを保存するために、水平方向と垂直方向に移動してもよいです

注意：GIFの記録ので、背景色が変更され、ドラッグした後

スケーリングVUEは、要約を使用VUE-ドラッグ・サイズ変更が可能なコンポーネントをドラッグすることができます

機能

インストールと基本的な使い方

共通するのは、要約属性

一般的なイベント概要

例えば

おすすめ