dragstart // 開(kāi)始拖拽一個(gè)元素時(shí)觸發(fā)
draggable // 指定可被拖拽的元素
dragend  // 當(dāng)拖拽操作結(jié)束時(shí)觸發(fā)
dragover // 當(dāng)拖拽元素在可釋放目標(biāo)上移動(dòng)時(shí)觸發(fā)
drop  // 當(dāng)拖拽元素在可釋放目標(biāo)上被釋放時(shí)觸發(fā)

<!-- 拖拽元素列表數(shù)據(jù) -->
<script>
// com 為對(duì)應(yīng)的視圖組件，在釋放區(qū)域顯示
typeList: {
 banner: {
  name: '輪播圖',
  icon: 'el-icon-picture',
  com: Banner
 },
 product: {
  name: '商品',
  icon: 'el-icon-s-goods',
  com: Product
 },
 images: {
  name: '圖片',
  icon: 'el-icon-picture',
  com: Images
 },
}
</script>
<!-- 拖拽元素 -->
<ul 
 @dragstart="dragStart"
 @dragend="dragEnd"
>
 <li 
  v-for="(val, key, index) in typeList"
  draggable 
  :data-type="key"
  :key="index + 1"
 >
  <span :class="val.icon"></span>
  <p>{{val.name}}</p>
 </li>
</ul>
<!-- 釋放區(qū)域 -->
<div 
 class="view-content"
 @drop="drog"
 @dragover="dragOver"
>
</div>

// 拖拽類型
dragStart(e) {
 this.type = e.target.dataset.type
}

// 'view-content': 外層盒子的class，直接 push
// 'item': 盒子內(nèi)部的元素，需計(jì)算位置，進(jìn)行變換操作
dragOver() {
 let className = e.target.className
 let name = className !== 'view-content' ? 'item' : 'view-content'

 // 組件的默認(rèn)數(shù)據(jù)
 const defaultData = {
  type: this.type, // 組件類型
  status: 2,   // 默認(rèn)狀態(tài)
  data: [],   // 基本數(shù)據(jù)
  options: {}   // 其他操作
 }

 if (name == 'view-content') {
  //...
 } else if (name == 'item') {
  //...
 }
}

if (name == 'view-content') {
 if (!this.isPush) {
  this.index = this.view.length
  this.isPush = true
  this.view.push(defaultData)
 }
}

if (name == 'item') {
 let target = e.target
 let [ y, h, curIndex ] = [ e.offsetY, target.offsetHeight, target.dataset.index ]
 let direction = y < (h / 2) // 計(jì)算鼠標(biāo)處于當(dāng)前元素的位置，來(lái)決定拖拽元素的上/下

 if (!this.isPush) {
  // first
  if (direction) {
   if (curIndex == 0) {
    this.view.unshift(defaultData)
   } else {
    this.view.splice(curIndex, 0, defaultData)
   }
  } else {
   curIndex = +curIndex + 1
   this.view.splice(curIndex, 0, defaultData)
  }
 } else {
  // Moving
  if (direction) {
   var i = curIndex == 0 ? 0 : curIndex - 1
   var result = this.view[i]['status'] == 2
  } else {
   var i = +curIndex + 1
   var result = this.view.length > i && this.view[i]['status'] == 2
  }
  
  // 拖拽元素是否需變換位置
  if (result) return

  const temp = this.view.splice(this.index, 1)
  this.view.splice(curIndex, 0, temp[0])
 }
 this.index = curIndex // 拖拽元素位置
 this.isPush = true  // 進(jìn)入則push，即true
}

e.preventDefault()
e.stopPropagation()

.item div{
 pointer-events: none;
}

// 結(jié)束拖拽
dragEnd(e) {
 this.$delete(this.view[this.index], 'status')
 this.isPush = false
 this.type = null
},
// 已放置到指定位置
drog(e) {
 e.preventDefault()
 e.stopPropagation()
 this.dragEnd()
},

.
├── components
| ├── Edit   ## 右邊編輯
| | ├── Info  # 基本信息
| | ├── Image  # 廣告圖
| | ├── Product # 商品
| | └── Index  # 管理編輯組件的信息
| └── View   ## 中間視圖
| | ├── Banner  # 輪播圖
| | ├── Images  # 廣告圖
| | └── Product # 產(chǎn)品列表
└── page
 └── index   ## 主頁(yè)面

view: [
 {
  type: 'info',
  title: '頁(yè)面標(biāo)題',
  remarks: '頁(yè)面?zhèn)渥?,
  backgroundColor: 'red'
 },
 {
  type: 'banner',
  data: [
   { url: '1.jpg', name: '輪播圖1', link: 'https://輪播圖跳轉(zhuǎn)地址.cn' },
   { url: '2.jpg', name: '輪播圖2', link: 'https://輪播圖跳轉(zhuǎn)地址.cn' }
  ]
 },
 {
  type: 'images',
  data: [
   { url: '1.jpg', name: '廣告圖1', link: 'https://廣告圖跳轉(zhuǎn)地址.cn' },
   { url: '2.jpg', name: '廣告圖2', link: 'https://廣告圖跳轉(zhuǎn)地址.cn' }
  ]
 },
 {
  type: 'product',
  data: [
   { id: '1', name: '商品1', image: '1.jpg' }, 
   { id: '2', name: '商品2', image: '2.jpg' }
  ],
  options: {
   originalPrice: true, // 劃線價(jià)
   goodRatio: true,  // 好評(píng)率
   volumeStr: false,  // 銷量數(shù)
  }
 }
]

<section class="r">
 <EditForm
  :data="props"
  v-if="isRight"
 ></EditForm>
</section>
<script>
// 切換視圖組件
selectType(index) {
 this.isRight = false
 this.props = this.view[index]
 this.$nextTick(() => this.isRight = true)
}
</script>

<!-- 禁用所有默認(rèn)方法 -->
<el-upload
 :http-request="upload"
 :show-file-list="false"
 multiple
 action
>
 <img :src="item.url" v-for="(item, index) in list" :key="index">
</el-upload>
<script>
upload(params) {
 const file = params.file;
 const form = new FormData();
 form.append("file", file);
 form.append("clientType", "multipart/form-data");

 const index = this.imageIndex // 編輯圖片的索引
 const data = { 
  url: URL.createObjectURL(file), 
  form
 }
 if (index !== null) {
  // this.list => 圖片集合
  this.$set(this.list, index, data)
 } else {
  this.list.push(data)
 }
}
</script>

// 根據(jù)上面的代碼，使用Promise實(shí)現(xiàn)上傳功能
const request = []
this.list.forEach(item => {
 request.push(
  new Promise((resolve, reject) => {
   /**
    * 上傳接口
    * 替換原 url
    * 刪除 form
    */
   imageUpload(item.form).then(res => {
    item.url = res.data.url
    delete item.form
    resolve(res)
   }).catch(err => {
    reject(err)
   })
  })
 )
})
Promise.all(request).then(res => {
 // ... submit ...
})