vue 拖拽
1、左右容器拖拽
2、容器内位置拖拽切换
3、判断性拖拽(若不适配,鼠标显示禁止拖拽图标)
4、点击大标题,变输入框修改,最后提交表单
<div class="item list_wrap" :class="'item' + index" v-for="(item, index) in dataList" :key="index" v-if="item.key!='box'" @drop='onDrop($event, item.key)' @dragover.prevent="dragOver($event, item,index)" @dragenter.prevent > {{ item.title }}
@on-blur="editTitle(index,false)"/>if="item.children&&item.children.length>0" v-for="(row,_index) in item.children" :key="_index" draggable="true" @dragstart="handleDragStart($event, item,index,_index)" @dragover.prevent="handleDragOver($event, item,index,_index)" @dragenter="handleDragEnter($event, item,index,_index)" @dragend="handleDragEnd($event, item,index,_index)"> {{ row.lable }}
<div class="item list_wrap" :class="'item' + index" v-for="(item, index) in dataList" :key="index" v-if="item.key=='box'" @drop='onDrop($event, item.key)' @dragover.prevent="dragOver($event, item,index)" @dragenter.prevent > {{ item.title }}
@on-blur="editTitle(index,false)"/>if="item.children&&item.children.length>0" v-for="(row,_index) in item.children" :key="_index" draggable="true" @dragstart="handleDragStart($event, item,index,_index)" @dragenter="handleDragEnter($event, item,index,_index)" @dragend="handleDragEnd($event, item,index,_index)"> {{ row.lable }}
检测限
{{ item.title }}
if="item.children&&item.children.length>0" v-for="(row,_index) in item.children" :key="_index" draggable @dragstart='startDrag($event, item,index,_index)' @dragend="dragEnd($event, item,index,_index)">{{ row.lable }}