HTML ドラッグ アンド ドロップ機能の実装コード

// 親コンテナのコアスタイル幅: 100%;
  高さ: 100%;

//サブコンテナのコアスタイルの位置: absolute;
  上位: 50%;
  左: 50%;
  変換: translate(-50%,-50%);

/*
* 子コンテナが作成された際に、親コンテナを基準とした子コンテナの上端と左端の位置を取得します */

マウントされた（）{
  this.left = this.$refs.fatherBox.offsetLeft
  this.top = this.$refs.fatherBox.offsetTop
}

/*
* マウスが押されたとき* 1. 子コンテナの移動を許可するフラグを有効にする
* 2. マウスをクリックしたときに位置情報を記録する*/

マウスダウン（e）{
  // ポップアップウィンドウの移動を許可するフラグを設定する
  this.moveFlag = true
  // マウスの開始位置を保存します this.startLeft = e.clientX - this.left
  this.startTop = e.clientY - this.top
}

/*
* マウスが移動したとき* 1. フラグが子コンテナの移動を許可するかどうかを判断します* 2. ポップアップ ボックスの左の位置を設定します* 3. ポップアップ ボックスの右の位置を設定します*/

移動（e）{
  // フラグが移動を許可するかどうかをチェックします if (!this.moveFlag) return

  // 箇条書きボックスの左の位置を設定します。this.left = e.clientX - this.startLeft
  // 箇条書きボックスの右位置を設定します。this.top = e.clientY - this.startTop

}

/*
*マウスボタンを離したとき* 1.子コンテナの移動を許可するフラグをオフにする
*/

マウスアップ（e）{
  this.flag = false
}

/*
* 親コンポーネントのコードスニペットの jsx バージョン */

エクスポートデフォルト{
  小道具: {
    プレイリスト: {
      タイプ: 配列、
      必須: true
    }
  },
  与える （） {
    戻る （
      <div style={{width: '100%', height: '100%'}} ref={'father'}>
        {
          this.playList && this.playList.map((item, index) => {
            戻る （
              <子コンポーネント
                キー={インデックス}
                ref={インデックス}
                zIndex={インデックス}
                表示={true}
                backValue={this.backValue}
                情報={アイテム}
                幅={600}
                高さ={400}
              />
            ）
          })
        }
      </div>
    ）
  },
  メソッド: {
    backValue (左、上、zIndex) {
      this.$refs[zIndex].$el.style.top = `${top}px`
      this.$refs[zIndex].$el.style.left = `${left}px`
    }
  }
}

<!-- 親コンポーネント コード スニペットの Vue ファイル バージョン -->

<テンプレート>
  <div
    ref="父"
    スタイル"幅: 100%、高さ: 100%"
  >
    <子コンポーネント
      v-for="(プレイリスト内のアイテム、インデックス)"
      :key="インデックス"
      :ref="インデックス"
      :visible="true"
      :z-index="インデックス"
      :back-value="バック値"
      :info="アイテム"
      :close="閉じる"
      :width="600"
      :高さ= "400"
    />
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  コンポーネント:
    ビデオプレーヤーモーダル
  },
  小道具: {
    プレイリスト: {
      タイプ: 配列、
      必須: true
    }
  },
  メソッド: {
    backValue (左、上、zIndex) {
      this.$refs[zIndex][0].$el.style.top = `${top}px`
      this.$refs[zIndex][0].$el.style.left = `${left}px`
    }
  }
}
</スクリプト>

/*
* 1. this.width データは、親コンポーネントから渡された幅の値、または子コンポーネント自体によって設定されたデフォルト値です。* 2. this.height データは、親コンポーネントから渡された高さの値、または子コンポーネント自体によって設定されたデフォルト値です。*/

移動（e）{
  // フラグが移動を許可するかどうかをチェックします if (!this.moveFlag) return

  // 左ビューを超えているかどうかを判定します if (this.$refs.fatherBox.offsetLeft < this.width / 2) {
        // ポップアップボックスの移動を無効にする this.moveFlag = false
        // 箇条書きボックスの左の位置を設定します this.left = this.width / 2 + 10
        // コールバック関数を呼び出して、親コンポーネントへのオフセットを公開します。this.backValue(this.left, this.top, this.zIndex)
        戻る
      }

      // 右ビューを超えているかどうかを判断します if (this.$refs.fatherBox.offsetLeft > document.body.clientWidth - this.width / 2) {
        // ポップアップボックスの移動を無効にする this.moveFlag = false
        // 箇条書きボックスの右位置を設定します this.left = document.body.clientWidth - this.width / 2 - 10
        // コールバック関数を呼び出して、親コンポーネントへのオフセットを公開します。this.backValue(this.left, this.top, this.zIndex)
        戻る
      }

      // トップビューを超えているかどうかを判定します if (this.$refs.fatherBox.offsetTop < this.height / 2 + 70) {
        // ポップアップボックスの移動を無効にする this.moveFlag = false
        // 箇条書きボックスの上の位置を設定します this.top = this.height / 2 + 70 + 10
        // コールバック関数を呼び出して、親コンポーネントへのオフセットを公開します。this.backValue(this.left, this.top, this.zIndex)
        戻る
      }

      // 下部ビューを超えているかどうかを判断します if (this.$refs.fatherBox.offsetTop > document.body.clientHeight - this.height / 2 - 50) {
        // ポップアップボックスの移動を無効にする this.moveFlag = false
        // 箇条書きボックスの下の位置を設定します this.top = document.body.clientHeight - this.height / 2 - 50 - 10
        // コールバック関数を呼び出して、親コンポーネントへのオフセットを公開します。this.backValue(this.left, this.top, this.zIndex)
        戻る
      }

      // 箇条書きボックスの左の位置を設定します。this.left = e.clientX - this.startLeft
      // 箇条書きボックスの右位置を設定します。this.top = e.clientY - this.startTop

      // コールバック関数を呼び出して、親コンポーネントへのオフセットを公開します。this.backValue(this.left, this.top, this.zIndex)
}

マウスアウト(e) {
  this.moveFlag = false
}