Dragdrop 드래그

요소를 드래그해 옮기거나 순서를 바꿀 수 있게 해 주는 드래그 앤 드롭 컴포넌트예요.

출처: 문서

본문

드래그 컴포넌트예요.

언제 사용하나요?

요소를 드래그하거나 드래그로 순서를 정렬해야 하는 상황에서 사용해요.

Sortable 기본 사용법

:::demo 컨테이너 안에서 드래그로 순서를 정렬해요.

<template>
  <div class="card-container"
    v-d-sortable="{
      list: list,
      drop: onDrop,
    }"
  >
    <div class="card-item" v-for="item in list" :key="item.id" >
      <h2 class="card-title">{{ item.title }}</h2>
      <span class="card-description">{{ item.des }}</span>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const list = ref([
      { id: '1', title: 'Project1', des: 'Project Description' },
      { id: '2', title: 'Project2', des: 'Project Description' },
      { id: '3', title: 'Project3', des: 'Project Description' },
      { id: '4', title: 'Project4', des: 'Project Description' },
      { id: '5', title: 'Project5', des: 'Project Description' },
      { id: '6', title: 'Project6', des: 'Project Description' },
      { id: '7', title: 'Project7', des: 'Project Description' },
      { id: '8', title: 'Project8', des: 'Project Description' },
    ]);

    const onDrop = (event) => {
      console.log(event);
    };

    return {
      list,
      onDrop,
      msg: 'DragDrop 拖拽 组件文档示例'
    }
  }
})
</script>

<style>
  div.card-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .card-item {
    width: 200px;
    height: 100px;
    margin: 4px;
    padding: 12px 20px;
    background-color: var(--devui-global-bg, #f3f6f8);
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: grab;
  }

  .card-item h2 {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    border: none; 
  }

  .card-item .card-description {
    margin-top: 8px;
  }

  .card-item.devui-drag-item {
    border: 1px solid var(--devui-primary, #5e7ce0);
  }
</style>

:::

Sortable 드래그 영역 지정

:::demo 컨테이너 안에서 드래그 정렬 시 드래그할 요소를 지정해요.

<template>
  <div class="list-container"
    v-d-sortable="{
      list: list,
      handle: '.drag-handle',
      drop: onDrop,
      dragClass: 'my-list-drag-item'
    }"
  >
    <div class="list-item" v-for="item in list" :key="item.id" >
      <i class="icon icon-drag drag-handle"></i>
      <d-input v-model="item.value" :placeholder="item.placeholder"></d-input>
    </div>
  </div>
  <d-button variant="solid" class="submit-btn" @click="onSubmit">Submit</d-button>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const list = ref([
      { id: '1', placeholder: 'Project1', value: '' },
      { id: '2', placeholder: 'Project2', value: '' },
      { id: '3', placeholder: 'Project3', value: '' },
      { id: '4', placeholder: 'Project4', value: '' },
      { id: '5', placeholder: 'Project5', value: '' },
      { id: '6', placeholder: 'Project6', value: '' },
    ]);

    const onDrop = (event) => {
      console.log(event);
    };

    const onSubmit = () => {
      console.log(list.value);
    }

    return {
      list,
      onDrop,
      onSubmit,
      msg: 'Dragdrop 拖拽 组件文档示例'
    }
  }
})
</script>

<style>
  .list-container {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .list-item {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    margin: 4px 0;
    padding: 4px 8px;
    background-color: var(--devui-global-bg, #f3f6f8);
    border: 1px solid transparent;
    border-radius: 4px;
  }

  .list-item .drag-handle {
    cursor: grab;
  }

  .list-item > i {
    margin-right: 4px;
  }

  .list-item.my-list-drag-item {
    border: 1px solid var(--devui-primary, #5e7ce0);
  }

  .submit-btn {
    margin-top: 8px;
  }
</style>

:::

Sortable 파라미터

Sortable 이벤트

Sortable 타입 정의

DropEvent

type DropEvent = {
  event: DragEvent, // 원본 drag 이벤트
  list: any, // 현재 바인딩된 list(전달한 list와 같은 객체예요)
  fromIndex: number,  // 드래그를 시작한 요소의 index
  targetIndex: number // drop된 요소의 index
}

더 알아보기 (Learn more)

v-d-sortable 지시자는 list에 바인딩한 배열의 순서를 실제로 바꿔 주기 때문에 별도의 정렬 로직 없이도 드래그 정렬을 만들 수 있어요. 특정 핸들에서만 드래그가 시작되게 하려면 handle에 CSS 선택자를 지정하면 돼요.