<template>
  <el-row :gutter="16">
    <el-col :md="8" :sm="24" :xs="24">
      <ele-card header="宫格拖拽排序">
        <vue-draggable
          v-model="grid"
          item-key="id"
          :animation="300"
          :set-data="() => void 0"
          class="demo-grid"
        >
          <template #item="{ element }">
            <div class="demo-grid-item">{{ element.name }}</div>
          </template>
        </vue-draggable>
      </ele-card>
    </el-col>
    <el-col :md="16" :sm="24" :xs="24">
      <ele-card header="宫格相互拖拽">
        <div style="display: flex; align-items: flex-start">
          <vue-draggable
            v-model="grid1"
            item-key="id"
            :animation="300"
            group="demoDragGrid"
            :set-data="() => void 0"
            class="demo-grid"
          >
            <template #item="{ element }">
              <div class="demo-grid-item">{{ element.name }}</div>
            </template>
          </vue-draggable>
          <vue-draggable
            v-model="grid2"
            item-key="id"
            :animation="300"
            group="demoDragGrid"
            :set-data="() => void 0"
            class="demo-grid"
            style="margin-left: 12px"
          >
            <template #item="{ element }">
              <div class="demo-grid-item">{{ element.name }}</div>
            </template>
          </vue-draggable>
        </div>
      </ele-card>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import VueDraggable from 'vuedraggable';

  /** 数据 */
  const grid = ref([
    { id: 1, name: '001' },
    { id: 2, name: '002' },
    { id: 3, name: '003' },
    { id: 4, name: '004' },
    { id: 5, name: '005' },
    { id: 6, name: '006' }
  ]);

  /** 数据1 */
  const grid1 = ref([
    { id: 1, name: '001' },
    { id: 2, name: '002' },
    { id: 3, name: '003' },
    { id: 4, name: '004' },
    { id: 5, name: '005' },
    { id: 6, name: '006' }
  ]);

  /** 数据2 */
  const grid2 = ref([
    { id: 7, name: '007' },
    { id: 8, name: '008' },
    { id: 9, name: '009' },
    { id: 10, name: '010' },
    { id: 11, name: '011' },
    { id: 12, name: '012' }
  ]);
</script>

<style lang="scss" scoped>
  .demo-grid {
    width: 600px;
    margin: 0 auto;
    max-width: 100%;
    min-height: 94px;
    border-radius: 4px;
    border: 1px solid hsla(0, 0%, 60%, 0.2);
    box-sizing: border-box;
    padding: 8px;
    display: grid;
    grid-gap: 8px 8px;
    grid-template-columns: repeat(3, 1fr);
  }

  .demo-grid-item {
    color: #fff;
    background: #1677ff;
    border-radius: 4px;
    text-align: center;
    padding: 28px 0;
    cursor: move;

    &.sortable-ghost {
      opacity: 0;
    }
  }
</style>
