vue实现拖拽

在这里插入图片描述
<!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>
九段刀客
发布了142 篇原创文章 · 获赞 20 · 访问量 2万+
私信关注
猜你喜欢
