element table 可拖拽,elementui实现拖拽
这篇文章主要介绍了某视频剪辑软件元素埃尔-传输增加拖拽功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
芯资管项目要求埃尔传输增加拖拽排序，左右上下互相拖拽功能；
原来的组件不支持拖拽，这里要用个第三方脱宅组件排序表
首先安装
sudo npm i sortablejs - save-dev
超文本标记语言代码
模板
El-transfer ref= transfer id= transfer v-model= value :data= data
span slot-scope= { option } :draggable=！选项。已禁用 @ dragstart= drag($ event，option) { { option。key } }-{ { option。label } }/span
/el-transfer
/template `
创造
脚本
从"排序表"导入可排序的
导出默认值{
data() {
const generateData=_={
常量数据=[];对于(设I=1；i=15i ) {
data.push({
关键：我，
标签:` 1备选项${i} `，
已禁用：I % 4===0 })；
}返回数据；
};返回{
数据：generateData()，
值：[1,4],
draggingKey : null }
},
已安装(){
常量转移=这个.$refs.transfer.$el
const左面板=transfer。getelementsbyclassname( El-transfer-panel )[0].getElementsByClassName( El-transfer-panel _ _ body )[0]；
const右面板=传输。getelementsbyclassname( El-transfer-panel )[1].getElementsByClassName( El-transfer-panel _ _ body )[0]；
const rightEl=右面板。getelementsbyclassname( El-transfer-panel _ _ list )[0]
Sortable.create(rightEl，{
onEnd: (evt)={
const {oldIndex，newIndex }=evt
const temp=this.value[oldIndex]
如果(!temp temp===未定义){
返回
}//解决右边最后一项从右边拖左边，有不明确的的问题
这个. set(this.value，oldIndex，this.value[newIndex])
这个. set(this.value，newIndex，temp)
}
})
const left El=左面板。getelementsbyclassname( El-transfer-panel _ _ list )[0]
Sortable.create(leftEl，{
onEnd: (evt)={
const {oldIndex，newIndex }=evt
const temp=this.data[oldIndex]
如果(!temp temp===未定义){
返回
} //解决右边最后一项从右边拖左边，有不明确的的问题
这个. set(this.data，oldIndex，this.data[newIndex])
这个. set(this.data，newIndex，temp)
}
})
leftPanel.ondragover=(ev)={
ev.preventDefault()
}
leftPanel.ondrop=(ev)={
伊芙。防止默认()；
常量索引=this。价值。的索引。拖动键)如果(索引！==-1){ this.value.splice(index，1)
}
}
rightPanel.ondragover=(ev)={
ev.preventDefault()
}
rightPanel.ondrop=(ev)={
伊芙。防止默认()；如果(这个。价值。的索引。拖动键)===-1){ this。价值。推(这个。拖动键)
}
}
},
方法：{
拖(ev，option){ this。拖动键=option。键
}
}
}
/脚本
到此这篇关于某视频剪辑软件元素埃尔-传输增加拖拽功能的文章就介绍到这了，更多相关元素埃尔-转移拖拽内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。