拖拽FormKit

FormKit的拖放是一个小库，用于添加数据-首先在你的应用程序中拖放排序和传输列表。它简单、灵活、不受框架限制，并且只有大约4Kb的gzipped。 GitHub 文档

特点

• 轻量级：压缩后的库文件小至4KB，对性能影响微乎其微。
• 框架无关性：无论你使用哪种前端框架，都能无缝集成。
• 数据优先：以数据为中心的设计使得处理拖放事件变得简洁明了。
• 类型安全：对于TypeScript用户提供类型支持，增强代码可维护性。
• 全面文档：详尽的文档指导，让开发者能够快速上手并高效利用。

npm install @formkit/drag-and-drop

React

import React from "react";
import { useDragAndDrop } from "@formkit/drag-and-drop/react";

export function myComponent() {
  const [parent,tapes] = useDragAndDrop<HTMLUListElement, string>([
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ]);
  return (<ul ref={parent}>
    {
    tapes.map((tape) => (
        <li className="cassette" 
            data-label={tape} 
            key={tape}>
            {tape}
         </li>
      ))}
    </ul>);
}

Vue

<script setup lang="ts">
import { useDragAndDrop } from "@formkit/drag-and-drop/vue";
const [parent, tapes] = useDragAndDrop([
  "Depeche Mode",
  "Duran Duran",
  "Pet Shop Boys",
  "Kraftwerk",
  "Tears for Fears",
  "Spandau Ballet",
]);
</script>

<template>
  <ul ref="parent">
    <li v-for="tape in tapes" 
        :key="tape" 
        class="cassette">
        {{tape }}
    </li>
  </ul>
</template>