使用句柄操作

vue-draggable-plus指南-教程

使用句柄操作

我们可以通过 handle 属性传递一个选择器，来指定拖拽的句柄。

组件使用

vue 复制代码

<template>
  <button @click="handleAdd">Add</button>

  <div class="flex justify-between">
    <VueDraggable
      v-model="list"
      :animation="150"
      handle=".handle"
      class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded"
    >
      <div
        v-for="(item, index) in list"
        :key="item.id"
        class="h-50px bg-gray-500/5 px-2 rounded flex items-center justify-between"
      >
        <IconSort class="handle cursor-move"></IconSort>
        <input type="text" v-model="item.name" />
        <iconClose class="cursor-pointer" @click="remove(index)"></iconClose>
      </div>
    </VueDraggable>
    <preview-list :list="list" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'

const list = ref([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])

function handleAdd() {
  const length = list.value.length + 1
  list.value.push({
    name: `Juan ${length}`,
    id: `${length}`
  })
}

function remove(index: number) {
  list.value.splice(index, 1)
}
</script>

函数使用

vue 复制代码

<template>
  <button @click="handleAdd">Add</button>

  <div class="flex justify-between">
    <section
      ref="el"
      class="flex flex-col p-4 gap-2 w-300px bg-gray-500/5 rounded"
    >
      <div
        v-for="(item, index) in list"
        :key="item.id"
        class="h-50px bg-gray-500/5 rounded flex items-center justify-between px-2"
      >
        <IconSort class="handle cursor-move"></IconSort>
        <input type="text" v-model="item.name" />
        <iconClose class="cursor-pointer" @click="remove(index)"></iconClose>
      </div>
    </section>
    <preview-list :list="list" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useDraggable } from 'vue-draggable-plus'

const list = ref([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])
const el = ref()
useDraggable(el, list, { animation: 150, handle: '.handle' })

function handleAdd() {
  const length = list.value.length + 1
  list.value.push({
    name: `Juan ${length}`,
    id: `${length}`
  })
}

function remove(index: number) {
  list.value.splice(index, 1)
}
</script>

指令使用

vue 复制代码

<template>
  <button @click="handleAdd">Add</button>

  <div class="flex justify-between">
    <section
      v-draggable="[list, { animation: 150, handle: '.handle' }]"
      class="flex flex-col p-4 gap-2 w-300px bg-gray-500/5 rounded"
    >
      <div
        v-for="(item, index) in list"
        :key="item.id"
        class="h-50px bg-gray-500/5 rounded flex p-4 items-center justify-between px-2"
      >
        <IconSort class="handle cursor-move"></IconSort>
        <input type="text" v-model="item.name" />
        <iconClose class="cursor-pointer" @click="remove(index)"></iconClose>
      </div>
    </section>
    <preview-list :list="list" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { vDraggable } from 'vue-draggable-plus'

const list = ref<
  {
    name: string
    id: string
  }[]
>([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])

function handleAdd() {
  const length = list.value.length + 1
  list.value.push({
    name: `Juan ${length}`,
    id: `${length}`
  })
}

function remove(index: number) {
  list.value.splice(index, 1)
}
</script>

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。