使用drag与drop实现拖拽，（vue）

在功能中有一项是需要实现拖拽的。虽然最终项目没有采取这样的拖拽方式，但是，当初也是费了九牛二虎之力完成了这个功能。增加了对函数的更深理解。下面就再重现一下代码。

这是张鑫旭的关于drag与drop函数的介绍，很详细：http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96%E6%8B%BD%E4%B8%8E%E6%8B%96%E6%94%BE%E7%AE%80%E4%BB%8B/

下面是代码片段：

< 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()

}

然后，drag与drop系统的研究明天再说。

这样写的坏处是什么，还有为什么不采取这种方法实现拖拽。