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

这是张鑫旭的关于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系统的研究明天再说。

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

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue