vue拖拉拽动态表单

关注

转载最新推荐文章于 2026-07-30 10:23:49 发布 1.3k 阅读 AI 写同款· GEO 优化 ›

Vue表单拖拽排序 Vue table表单拖拽排序业务需求：因为数据展示使用的是 elementUI的 Table进行数据展示的，现在的需求是通过拖拽表单进行表单排序。同时，动态修改表单中的数据排列顺序。查阅了好多资料，也翻看了好多github上别人封装好的表单插件，但是最终都不是自己想要的，其中主要原因就是，后台管理系统页面中，同一个窗口可能涉及到多个表单拖拽排序，与此同时，使用部分插件就有可能导致数据更新不及时，或者下次在使用的时候，数据无论如何赋值就是更新不成功，导致最终渲染的要拖拽的表单一会有数据，一会无数据的，体阅读详情

<div class="box">
<h4>这是发布页面</h4>
<el-row :gutter="10">
<el-col :span="8">
<div class="grid-content bg-purple-light">
<div id="ComponentFactory">
<el-form ref="form" :model="form" label-width="80px">

</div>

</div>
</el-col>
<el-col :span="8" class="flxed">

<div class="grid-content">

<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
<el-tab-pane :key="item.name" v-for="(item, index) in editableTabs" :label="item.title" :name="item.name">

<div class="tab-content" id="box" v-model="htmlcode" @dragstart='removedrop($event)' @drop='copydrap($event)' @dragover='allowDrop($event)'>

</div>

</el-tab-pane>
</el-tabs>
</div>

<div class="bg-purple-light" id="removeBox" @drop='removedrap($event)' @dragover='allowDrop($event)'>
</div>
</el-col>
<el-col :span="8" class="flxed">

<div class="grid-content bg-purple-light" id="codeBox" >{{ htmlcode }}</div>
</el-col>
</el-row>

<el-dialog title="修改名称" :visible.sync="dialogFormVisible" width="20%">
<el-form :model="form">
<el-form-item label="名称" >
<el-input v-model="labelname"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="updateLabel">确定</el-button>
</div>
</el-dialog>
</div>
</template>

import
<script type="application/javascript">
let id = null
let itemName = null
let cloneObject = null
let removeid = null
let moveObj = null
export default {
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
pickerOptions1: {
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
/* 日期插件*/
datetimevalue: '',
/* 模态框状态*/
dialogFormVisible: false,
labelid: '',
labelname: '',
htmlcode: '',
/* 选项卡属性*/
editableTabsValue: '2',
editableTabs: [{
title: 'Tab 1',
name: '1',
content: 'Tab 1 content'
}, {
title: 'Tab 2',
name: '2',
content: 'Tab 2 content'
}],
tabIndex: 2
}
},
methods: {
// 抓起
copydrop: function(e) {
console.log('SET -> addBuffer', e.target.id)
e.dataTransfer.setData('addBuffer', e.target.id)
this.CopyCss(e.target.id, '1px dashed #66CC99', 'rgba(204,204,204,0.3)', '4px')
},
// 移除起
removedrop: function(e) {
console.log('移除节点托起ID：', e.target.id)
e.dataTransfer.setData('removeBuffer', e.target.id)
this.CopyCss(e.target.id, '1px dashed red', 'rgba(204,204,204,0.3)', '4px')
},
// 移除放下
removedrap: function(e) {
removeid = e.dataTransfer.getData('removeBuffer')
if (removeid === null || removeid === '') {
console.log('removeId == null')
return
}
console.log('移除节点放下ID：', removeid)
// 删除节点
document.getElementById(removeid).parentNode.removeChild(document.getElementById(removeid));
},
// 放下
copydrap: function(e) {
// console.log('放下')
e.preventDefault()
id = e.dataTransfer.getData('addBuffer')
if (id === null || id === '') {
console.log('id is NULL！')
return
}
itemName = 'item' + parseInt(Math.random() * (1000000 - 1 + 1) + 1)
console.log('GET-> addBuffer:', itemName)
// 克隆真实对象
cloneObject = document.getElementById(id).cloneNode(true)

// 为克隆对象设置唯一Id
cloneObject.setAttribute('id', itemName)
// this.$set(cloneObject, 'id', itemName)
// this.$set(cloneObject, '@click', 'updateLabel()')
// 把新的节点添加到新的区域中
e.target.appendChild(cloneObject)

console.log(e.target.id)
// console.log(cloneObject)
// 设置样式
this.CopyCss(id, '', '', '')

// 修改名称
this.dialogFormVisible = true
this.labelid = itemName
},
// 拖动过程
allowDrop: function(e) {
console.log(e.target.id)
e.preventDefault()
},
updateLabel: function() {
this.dialogFormVisible = false
// 设置labelname 到对呀的label
document.getElementById(this.labelid).children[0].children[0].innerHTML = this.labelname
// console.log(label)
this.htmlcode = document.getElementById('box').innerHTML
document.getElementById('codeBox').innerHTML = this.htmlcode
},
CopyCss: function(obj, border, background, borderradius) {
moveObj = document.getElementById(obj)
moveObj.style.border = border
moveObj.style.background = background
moveObj.style.borderRadius = borderradius
},
/* 选项卡属性*/
handleTabsEdit(targetName, action) {
if (action === 'add') {
let newTabName = ++this.tabIndex + ''
this.editableTabs.push({
title: 'New Tab',
name: newTabName,
content: 'New Tab content'
});
this.editableTabsValue = newTabName
}
if (action === 'remove') {
let tabs = this.editableTabs;
let activeName = this.editableTabsValue
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1]
if (nextTab) {
activeName = nextTab.name
}
}
});
}