怎么在vue中使用drag与drop实现一个拖拽功能

本篇文章给大家分享的是有关怎么在vue中使用drag与drop实现一个拖拽功能，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

<div  class="fav-fold-panel"  v-if="!typeChange"  draggable="true" @dragstart="drag($event)" @dragover="allowDrop($event)"> <!-- 面板内容 --> <div  class="favTitle-card" :data="favPanelAllData" v-if="foldDone"> <favPanel v-for="item in favPanelAllData" v-if="item.id===1" :favTitle="item.title" renameText="更名" foldText="折叠" unfoldText="展开" :favListData="item.content" draggable="true" @dragstart="drag($event)"> <ul  class="ul-content"> <li  class="ul-content-li" :favCommonList1="item.content"></li> </ul> <!-- <favPopPanel :show="popShow" @onHide="popShow = false"></favPopPanel> --> <!-- <div :favListData="item.favListData"></div> --> </favPanel> </div> <div class="fav-card-create" :data="favPanelAllData"> <favFooter> <el-button type="primary" @click="addFoldFuc">新建文件夹</el-button> <el-button-group> <el-button @click="foldFuc">全部折叠</el-button> <el-button @click="foldFuc">全部展开</el-button> </el-button-group> </favFooter> </div> </div>

另一段代码：

<div  class="favTitle-card" :data="favPanelAllData" draggable="true" ondragstart="drag(event)"> <favPanel v-for="item in favPanelAllData" v-if="item.id===2" :favTitle="item.title" renameText="更名" foldText="没我" unfoldText="没你" :favListData="item.content"> <ul  class="ul-content"> <li  class="ul-content-li" :favListData="item.content" :if="!foldDone"></li> </ul> </favPanel> </div>

function部分

drag(event) { dom = event.currentTarget }, drop(event) { event.preventDefault() event.target.appendChild(dom) }, allowDrop(event) { event.preventDefault() }

以上就是怎么在vue中使用drag与drop实现一个拖拽功能，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。