Swapy，这是一个与框架无关的工具，只需要几行代码即可将任意布局转换为拖拽交换布局

安装

使用你喜欢的包管理器下载它

pnpm install swapy

或者使用 CDN

<script src="https://unpkg.com/swapy/dist/swapy.min.js"></script>
<script>
  // You can then use it like this
  const swapy = Swapy.createSwapy(container)
</script>

使用

接下来，我会想你展示一个简单的布局，但是你也可以使用它像你想要的那样复杂

指定 slots 和 items

• 指定一个slot，需要给元素指定属性data-swapy-slot="slot-key"，slot-key是唯一的。每一个slot只能包含一个item。items 则为你想要拖拽的元素。
• 为了将一个元素标记为item，你需要在这个元素上添加一个属性data-swapy-item="item-key"，同样的，item-key也是唯一的 默认情况下，你可以从item的任意位置拖动元素。你也可以在item中添加带有data-swapy-handle属性的元素，以指定通过该元素来拖拽item。

<div class="container">
  <div class="section-1" data-swapy-slot="foo">
    <div class="content-a" data-swapy-item="a">
      <!-- Your content for content-a goes here -->
    </div>
  </div>

  <div class="section-2" data-swapy-slot="bar">
    <div class="content-b" data-swapy-item="b">
      <!-- Your content for content-b goes here -->
      <div class="handle" data-swapy-handle></div>
    </div>
  </div>

  <div class="section-3" data-swapy-slot="baz">
    <div class="content-c" data-swapy-item="c">
      <!-- Your content for content-c goes here -->
    </div>
  </div>
</div>

使用 swapy

将容器元素传递给createSwapy，可以指定动画为dynamic/spring/none，默认动画为dynamic。

import { createSwapy } from 'swapy'

const container = document.querySelector('.container')

const swapy = createSwapy(container, {
  animation: 'dynamic' // or spring or none
})

// You can disable and enable it anytime you want
swapy.enable(true)

监听事件

你可以通过监听事件来执行一些操作。为了方便起见，你可以得到元素交换后的顺序的三种格式：map、object和array。

import { createSwapy } from 'swapy'

const container = document.querySelector('.container')

const swapy = createSwapy(container)

swapy.onSwap((event) => {
  console.log(event.data.object);
  console.log(event.data.array);
  console.log(event.data.map);

  // event.data.object:
  // {
  //   'foo': 'a',
  //   'bar': 'b',
  //   'baz': 'c'
  // }

  // event.data.array:
  // [
  //   { slot: 'foo', item: 'a' },
  //   { slot: 'bar', item: 'b' },
  //   { slot: 'baz', item: 'c' }
  // ]

  // event.data.map:
  // Map(3) {
  // 'foo' => 'a',
  // 'bar' => 'b',
  // 'baz' => 'c'
  // }
})

如何在框架中使用它

• React: examples/react
• Vue: examples/vue
• Svelte: examples/svelte