<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="./lib/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
<style>
.item {
width: 120px;
height: 50px;
border: 1px solid #000;
transition: all linear .3s
}
.item:hover{
background: pink;
}
</style>
</head>
<body>
<div id="app">
<transition-group tag="div">
<div class="item"
v-for="(item,index) in items"
:key="item.name"
draggable="true"
@dragstart="handleDragStart($event, item)"
@dragover.prevent="handleDragOver($event, item)"
@dragenter="handleDragEnter($event, item)"
@dragend="handleDragEnd($event, item)" >
<el-checkbox
:label="item.code"
>
{{item.name}}
</el-checkbox>
</div>
</transition-group>
</div>
<script>
new Vue({
el:'#app',
data () {
return {
items: [
{ name: "单据编号", code: "fOrderNumber" },
{ name: "客户", code: "fCustomerName" },
{ name: "合同名称", code: "fContractName" },
{ name: "创建日期", code: "fCT" },
{ name: "大区", code: "fOrderArea" },
{ name: "总长度", code: "fTotalLength" },
{ name: "销售数量", code: "fTotalNumber" },
{ name: "总重量", code: "fTotalWeight" },
{ name: "总金额", code: "fTotalPrice" },
{ name: "价税合计", code: "fPriceTaxesTotal" },
{ name: "面积", code: "fAcreage" },
{ name: "已出库数量", code: "fOutStockNumber" },
{ name: "订单类型", code: "fOrderType" },
{ name: "备注", code: "fRemark" },
{ name: "单据状态", code: "fOrderStatus" }
],
dragging: null
}
},
methods:{
handleDragStart(e,item){
this.dragging = item;
},
handleDragEnd(e,item){
this.dragging = null
},
//首先把div变成可以放置的元素,即重写dragenter/dragover
handleDragOver(e) {
e.dataTransfer.dropEffect = 'move'
},
handleDragEnter(e,item){
e.dataTransfer.effectAllowed = "move"
if(item === this.dragging){
return
}
const newItems = [...this.items]
console.log(newItems)
const src = newItems.indexOf(this.dragging)
const dst = newItems.indexOf(item)
newItems.splice(dst, 0, ...newItems.splice(src, 1))
this.items = newItems
}
}
})
</script>
</body>
</html>
vue实现拖拽
猜你喜欢
转载自blog.csdn.net/weixin_35958891/article/details/104157432
今日推荐
周排行