Vueカスタム指示により、ポップアップウィンドウのドラッグ4辺ストレッチと対角ストレッチ効果を実現

<テンプレート>
  <div
    クラス="パラメータ"
    v-ダイアログドラッグ
  >
    <div class="title">タイトル<div class="close">
        <画像
          src="../assets/close.png"
          代替案=""
        >
      </div>
    </div>
    <div class="content">コンテンツエリア</div>
  </div>
</テンプレート>

<スタイル lang="less">
.パラメータ{
  高さ: 569px;
  幅: 960ピクセル;
  位置: 絶対;
  左: 50%;
  上位: 50%;
  左マージン: calc(-960px / 2);
  上マージン: calc(-569px / 2);
  zインデックス: 999;
  背景: #fff;
  ボックスのサイズ: 境界線ボックス;
  ボックスの影: 0px 12px 32px 0px rgba(0, 0, 0, 0.08);
  境界線の半径: 2px;
  。タイトル {
    ディスプレイ: フレックス;
    フォントサイズ: 16px;
    高さ: 48px;
    行の高さ: 48px;
    背景: #f5f5f5;
    ボックスのサイズ: 境界線ボックス;
    ボックスシャドウ: インセット 0px -1px 0px rgba(0, 0, 0, 0.12);
    境界線の半径: 2px 2px 0px 0px;
    パディング: 0 20px;
    zインデックス: 99;
    フォントサイズ: 16px;
    フォントの太さ: 500;
    色: rgba(0, 0, 0, 0.85);
    。近い {
      画像 {
        幅: 10px;
      }
      margin-left: auto; // 右揃え}
  }
  。コンテンツ {
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
    高さ: calc(100% - 48px);
    ボックスのサイズ: 境界線ボックス;
    背景: #fff;
    オーバーフロー:自動;
  }
}
</スタイル>

'vue' から Vue をインポートします
'element-ui' から ElementUI をインポートします。
'element-ui/lib/theme-chalk/index.css' をインポートします。
'./App.vue' からアプリをインポートします。
'../drag.js' をインポートします

Vue.config.productionTip = false
Vue.js の ElementUI 要素をオーバーライドします。

新しいVue({
  レンダリング: h => h(App),
}).$mount('#app')

'vue' から Vue をインポートします
// v-dialogDrag: ポップアップウィンドウのドラッグ + 水平方向の伸縮 + 対角方向の伸縮 Vue.directive('dialogDrag', {
  バインド(el) {
  	// dialogHeaderEl はタイトルバーです。ドラッグの mousedown イベントをバインドします。const dialogHeaderEl = el.querySelector('.title')
   	// dragDom は命令にバインドされた dom 要素です。区別を容易にするために変数を定義します。const dragDom = el
    // すべての CSS 属性を取得します。互換性のある書き込み方法、つまり dom element.currentStyle firefox google window.getComputedStyle(dom element, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null) 
    // マウス押下イベントを定義する const moveDown = e => {
      // e.clientX, Y: ブラウザの表示ウィンドウに対するマウスの X、Y 座標 // offsetTop、offsetLeft: 現在の要素の offsetParent 要素の上端と左端に対する距離。ここでは、title には位置オフセットがないため、0 です。	
      : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

      // IEとの互換性のため
      スタイルL === 'auto'の場合、スタイルL = '0px'
      styT = sty.top とします。

      // IEでは、最初に取得される値はコンポーネント自身の50%であり、その値は移動後にpxに割り当てられることに注意してください。
      （sty.left.includes('%')の場合）{
        styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100)
        styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100)
      } それ以外 {
        styL = +styL.replace(/\px/g, '')
        styT = +styT.replace(/\px/g, '')
      }   

      document.onmousemove = 関数 (e) {
        // イベント委譲を通じて移動距離を計算する let left = e.clientX - disX
        top = e.clientY - disY とします。

        // 境界処理 if (-(left) > minDragDomLeft) {
          左 = -(minDragDomLeft)
        } そうでない場合 (左 > maxDragDomLeft) {
          左 = maxDragDomLeft
        }

        if (-(top) > minDragDomTop) {
          上 = -(minDragDomTop)
        } そうでない場合 (top > maxDragDomTop) {
          上 = maxDragDomTop
        }

        // 現在の要素を移動する dragDom.style.left = `${left + styL}px`
        dragDom.style.top = `${top + styT}px`
        
	// マウスを離したときにポップアップウィンドウが動かないようにする document.onmouseup = function () {
        ドキュメント.onmousemove = null
        document.onmouseup = null
      }
    }
    dialogHeaderEl.onmousedown = 下へ移動    
  }
})

 // マウスホバースタイルを定義する const CURSORTYPE = {
      上: 'n-resize'、
      下: 's-resize'、
      左: 'w-resize'、
      右:「e-resize」、
      // right_top は、次のコードでデータ処理を容易にするために記述されています right_top: 'ne-resize', 
      left_top: 'nw-resize'、
      left_bottom: 'sw-resize',
      right_bottom: 'se-resize'、
      デフォルト: 'デフォルト',
    };

    // マウスホバーポインターのタイプを決定する const checkType = obj => {
      定数 { x, y, 左, 上, 幅, 高さ } = obj
      タイプする
      (x > 左 + 幅 - 5 && el.scrollTop + y <= 上 + 高さ - 5 && 上 + 5 <= y) の場合 {
        タイプ = '右'
      }
      そうでない場合 (left + 5 > x && el.scrollTop + y <= top + height - 5 && top + 5 <= y) {
        タイプ = '左'
      } そうでない場合 (el.scrollTop + y > top + height - 5 && x <= left + width - 5 && left + 5 <= x) {
        タイプ = '下'
      } そうでない場合 (上 + 5 > y && x <= 左 + 幅 - 5 && 左 + 5 <= x) {
        タイプ = 'トップ'
      } そうでない場合 (x > 左 + 幅 - 5 && el.scrollTop + y > 上 + 高さ - 5) {
        タイプ = '右下'
      } そうでない場合 (left + 5 > x && el.scrollTop + y > top + height - 5) {
        タイプ = '左下'
      } そうでない場合 (上 + 5 > y && x > 左 + 幅 - 5) {
        タイプ = 'right_top'
      } そうでない場合 (上 + 5 > y && 左 + 5 > x) {
        タイプ = 'left_top'
      }
      戻り値の型 || 'default'
    }

  // 境界条件を決定する const boundaryLimit = obj => {
      const { 左、上、幅、高さ、diffX、diffY、画面高さ、画面幅、arr } = obj
      (arr[0] == '右' || arr[1] == '右') の場合 {
        if (width + diffX > screenWidth - left) {
          dragDom.style.width = 画面幅 - 左 + 'px'
        } それ以外 {
          dragDom.style.width = 幅 + diffX + 'px'
        }
      }
      arr[0] == '左' || arr[1] == '左' の場合 {
        （幅 - diffX > 幅 + 左）の場合{
          dragDom.style.width = 幅 + 左 + 'px'
          dragDom.style.left = - parseInt(sty.marginLeft) + 'px'
        } それ以外 {
          dragDom.style.width = 幅 - diffX + 'px'
          // 実際には left = left + marginLeft です。計算するときは marginLeft を減算する必要があります。dragDom.style.left = left + diffX - parseInt(sty.marginLeft) + 'px'
        }
      }
      (arr[0] == 'トップ' || arr[1] == 'トップ') {
        if (高さ - diffY > 高さ + 上) {
          dragDom.style.height = 高さ + 上 + 'px'
          dragDom.style.top = - parseInt(sty.marginTop) + 'px'
        } それ以外 {
          dragDom.style.height = 高さ - diffY + 'px'
          // top は実際には top + marginTop です。計算時に MarginTop を減算する必要があります。dragDom.style.top = top + diffY - parseInt(sty.marginTop) + 'px'
        }
      }
      もし (arr[0] == '下' || arr[1] == '下') {
        if (height + diffY > screenHeight - top) {
          dragDom.style.height = スクリーン高さ - 上
        } それ以外 {
          dragDom.style.height = 高さ + diffY + 'px'
        }
      }
    }
    ドラッグDom.onmousedown = e => {
      定数 x = e.clientX
      定数 y = e.clientY
      定数幅 = dragDom.clientWidth
      定数高さ = dragDom.clientHeight
      定数 left = dragDom.offsetLeft
      定数 top = dragDom.offsetTop
      const screenWidth = document.documentElement.clientWidth || document.body.clientWidth
      const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
      // dragDom.style.userSelect = 'なし'
      type = checkType({x, y, left, top, width, height}) とします。
      // ポップアップウィンドウのヘッダーかどうかを判定します if (x > left &&
        x < 左 + 幅 &&
        y > トップ + 5 &&
        y < 上 + dialogHeaderEl.clientHeight) {
        // dialogHeaderEl.onmousedown = moveDown
      } それ以外 {
        document.onmousemove = 関数 (e) {
          // 移動時にデフォルトのイベントを無効にする e.preventDefault()
          endX = e.clientX とします。
          endY = e.clientY とします。
          diffX = endX - x とします。
          diffY = endY - y とします。
          アーー
          // コード判断を簡素化するために型を配列形式に変換し、if (type.indexOf('_') == -1) を呼び出します。
            arr = [タイプ, '']
          } それ以外 {
            arr = type.split('_')
          }
          boundaryLimit({ 左、上、幅、高さ、diffX、diffY、画面高さ、画面幅、arr })
        }
        // ストレッチ終了 document.onmouseup = function () {
          ドキュメント.onmousemove = null

          document.onmouseup = null
        }
      }
    }

<テンプレート>
  <div
    クラス="パラメータ"
    v-ダイアログドラッグ
  >
    <div class="title">タイトル<div class="close">
        <画像
          src="../assets/close.png"
          代替案=""
        >
      </div>
    </div>
    <div class="content">コンテンツエリア</div>
    <div class="rightBlank">123</div>
    <div class="bottomBlank">456</div>
  </div>
</テンプレート>