用vue预览拖拽生成的html,vue使用HTML 拖放 API（Drag and Drop）

先看效果：

128f0fab-9995-47d1-9021-a5512b4a296a.gif

主要知识点还是HTML的API(Drag和Drop)，详情看这里HTML 拖放 API - Web API 接口参考 | MDN

下面看代码：

template

class="hold"

draggable="true"

v-for="(item, index) in specificationList"

:key="index"

:class="{'hold-active': index === enterIndex, 'drag-active': index === dragIndex}"

@drag.native="handleDrag"

@dragover.native.prevent="handleDragover"

@dragstart.native="handleDragstart(index)"

@dragenter.native="handleDragenter(index)"

@dragleave.native="handleDragleave"

@drop.native.prevent="handleDrop"

>

{ { item }}

script

data() {

return {

specificationList: ['大小', '颜色', '尺码', '重