Vueは視覚的なドラッグページエディタを実装します

dragstart // 要素のドラッグを開始したときにトリガーされます draggable // ドラッグ可能な要素を指定します dragend // ドラッグ操作が終了したときにトリガーされます dragover // ドラッグされた要素がドロップ可能なターゲット上に移動したときにトリガーされます drop // ドラッグされた要素がドロップ可能なターゲット上で放されたときにトリガーされます

<!-- 要素リストのデータをドラッグ-->
<スクリプト>
// com は対応するビューコンポーネントであり、typeList はリリース領域に表示されます: {
 バナー：
  名前:「カルーセル」
  アイコン: 'el-icon-picture',
  com: バナー
 },
 製品： {
  名前: '製品',
  アイコン: 'el-icon-s-goods',
  com: 製品
 },
 画像:
  名前: '画像'、
  アイコン: 'el-icon-picture',
  com: 画像
 },
}
</スクリプト>
<!-- 要素をドラッグ -->
<ul 
 @dragstart="ドラッグスタート"
 @dragend="ドラッグ終了"
>
 <li 
  v-for="(val, key, index) in typeList"
  ドラッグ可能 
  :data-type="キー"
  :key="インデックス + 1"
 >
  <span :class="val.icon"></span>
  <p>{{val.name}}</p>
 </li>
</ul>
<!-- リリースエリア -->
<div 
 クラス="コンテンツを表示"
 @drop="ドロップ"
 @dragover="ドラッグオーバー"
>
</div>

// ドラッグタイプ dragStart(e) {
 this.type = e.target.dataset.type
}

// 'view-content': 外側のボックスのクラス、直接プッシュ
// 'item': ボックス内の要素。位置を計算し、変換操作を実行する必要があります。dragOver() {
 className = e.target.className とします。
 name = className !== 'view-content' ? 'item' : 'view-content' とします

 // コンポーネントのデフォルトデータ const defaultData = {
  type: this.type, // コンポーネント タイプ status: 2, // デフォルト ステータス data: [], // 基本データ options: {} // その他の操作 }

 if (name == 'view-content') {
  //...
 } そうでない場合 (名前 == 'アイテム') {
  //...
 }
}

if (name == 'view-content') {
 if (!this.isPush) {
  this.index = this.view.length
  this.isPush = true
  this.view.push(デフォルトデータ)
 }
}

if (名前 == 'アイテム') {
 ターゲット = e.target とする
 [ y, h, curIndex ] = [ e.offsetY, target.offsetHeight, target.dataset.index ] とします。
 let direction = y < (h / 2) // 現在の要素上のマウスの位置を計算して、ドラッグされた要素の上下方向を決定します。if (!this.isPush) {
  // 初め
  if (方向) {
   (現在のインデックス == 0) の場合 {
    this.view.unshift(デフォルトデータ)
   } それ以外 {
    this.view.splice(現在のインデックス、0、デフォルトデータ)
   }
  } それ以外 {
   現在のインデックス = +現在のインデックス + 1
   this.view.splice(現在のインデックス、0、デフォルトデータ)
  }
 } それ以外 {
  //移動中
  if (方向) {
   var i = curIndex == 0 ? 0 : curIndex - 1
   var 結果 = this.view[i]['ステータス'] == 2
  } それ以外 {
   var i = +現在のインデックス + 1
   var result = this.view.length > i && this.view[i]['status'] == 2
  }
  
  // ドラッグされた要素の位置を変更する必要があるかどうか if (result) return

  定数 temp = this.view.splice(this.index, 1)
  this.view.splice(curIndex, 0, temp[0])
 }
 this.index = curIndex // 要素の位置をドラッグします this.isPush = true // 入力する場合は押す、つまり true
}

e.preventDefault()
e.stopPropagation()

.item div{
 ポインタイベント: なし;
}

// ドラッグ終了 dragEnd(e) {
 this.$delete(this.view[this.index], 'status')
 this.isPush = false
 this.type = null
},
// すでに指定された位置に配置されている drog(e) {
 e.preventDefault()
 e.stopPropagation()
 this.dragEnd()
},

。
├── コンポーネント
| ├── 編集 ## 右側で編集| | ├── 情報 # 基本情報| | ├── 画像 # 広告画像| | ├── 商品 # 商品| | └── インデックス # コンポーネント情報の管理と編集| └── 表示 ## 中央ビュー| | ├── バナー # スライドショー| | ├── 画像 # 広告画像| | └── 商品 # 商品一覧└── ページ
 └── インデックス ## メインページ

ビュー： [
 {
  タイプ: '情報'、
  タイトル: 'ページタイトル',
  備考: 'ページの備考'、
  背景色: '赤'
 },
 {
  タイプ: 'バナー'、
  データ： [
   { url: '1.jpg'、名前: 'カルーセル画像1'、リンク: 'https://carousel image jump address.cn' },
   { url: '2.jpg'、名前: 'カルーセル 2'、リンク: 'https://carousel jump address.cn' }
  ]
 },
 {
  タイプ: '画像'、
  データ： [
   { url: '1.jpg', name: '広告画像1', link: 'https://広告画像ジャンプアドレス.cn' },
   { url: '2.jpg'、name: '広告画像2'、link: 'https://広告画像ジャンプアドレス.cn' }
  ]
 },
 {
  タイプ: '製品'、
  データ： [
   { id: '1'、名前: '製品 1'、画像: '1.jpg' }, 
   { id: '2'、名前: '製品 2'、画像: '2.jpg' }
  ]、
  オプション:
   originalPrice: true, // 取り消し線付き価格 goodRatio: true, // 好意的な評価 volumeStr: false, // 販売量}
 }
]

<セクションクラス="r">
 <編集フォーム
  :data="プロパティ"
  v-if="isRight"
 </編集フォーム>
</セクション>
<スクリプト>
// ビューコンポーネントを切り替える selectType(index) {
 this.isRight = false
 this.props = this.view[インデックス]
 this.$nextTick(() => this.isRight = true)
}
</スクリプト>

<!-- すべてのデフォルトメソッドを無効にする -->
<el-アップロード
 :http-request="アップロード"
 :ファイルリストを表示="false"
 複数
 アクション
>
 <img :src="item.url" v-for="(item, index) リスト内" :key="index">
</el-アップロード>
<スクリプト>
アップロード(パラメータ) {
 定数ファイル = params.file;
 定数フォーム = 新しい FormData();
 form.append("ファイル", ファイル);
 フォームに "clientType"、"multipart/form-data" を追加します。

 const index = this.imageIndex // 画像インデックスを編集する const data = { 
  url: URL.createObjectURL(ファイル)、 
  形状
 }
 if (インデックス !== null) {
  // this.list => 画像コレクション this.$set(this.list, index, data)
 } それ以外 {
  this.list.push(データ)
 }
}
</スクリプト>

// 上記のコードに従って、Promise を使用してアップロード機能を実装します。const request = []
this.list.forEach(item => {
 リクエスト.push(
  新しい Promise((resolve, 拒否) => {
   /**
    * アップロードインターフェース* 元のURLを置き換える
    * フォームを削除
    */
   imageUpload(item.form).then(res => {
    アイテム.url = res.data.url
    アイテムの削除フォーム
    解決する
   }).catch(エラー => {
    拒否(エラー)
   })
  })
 ）
})
Promise.all(リクエスト).then(res => {
 // ... 提出する ...
})