比Draggable还要简单！这轻量级页面拖拽小工具，高效到爆！

简介

   Swapy是由TahaSh开发的一款开源JavaScript工具。它的核心功能是将静态布局转换为可以拖拽交换的动态布局。

        因此，Swapy的使用场景和Vue Draggable Plus还是有点差异的。

   Swapy 是一个与框架无关的工具。它几乎可以和市面上常用的所有框架衔接使用。

        你可以在不大幅修改原有项目结构的情况下，快速的通过增加Swapy，来对页面中的图片、文字等各种内容增加拖拽布局。

Swapy的主要特点

• 简单易用：Swapy的设计哲学是简单性。它不需要复杂的配置或大量的代码，使得开发者可以快速上手。

• 高度可定制：通过CSS和JavaScript，开发者可以轻松地定制拖拽项的外观和行为。

• 跨浏览器兼容性：Swapy在所有主流浏览器上都能正常工作，包括Chrome、Firefox、Safari和Edge。

• 开源：Swapy是一个开源项目，开发者可以自由地下载、使用和修改源代码。

安装使用

安装

        我们可以直接在文件中通过CDN的方式来安装Swapy，可以参考如下：

<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>

        当然，我们也可以通过包管理器来安装。

npm install swapy

使用

        使用Swapy前，需要在HTML中定义插槽(slot)和项目(item)。

        插槽(slot)是放置项目的容器。通过在容器中添加data-swapy-slot属性来指定。

        项目(item)则是可以被拖拽的元素。通过属性data-swapy-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>

        一个data-swapy-slot包含一个data-swapy-item，就这么简单！

        接着，就可以使用Swapy方法了。获取包含插槽(slot)和项目(item)的容器元素，并将该元素传递给createSwapy()函数。

import { createSwapy } from 'swapy'

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

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

        默认情况下，Swapy将使用dynamic动画。当然，你也可以使用spring或者none进行配置。

        最后，调用enable函数来触发。

//可以随时打开或关闭这儿拖拽布局
swapy.enable(true)

        至此，一个简单的拖拽布局示例就完成了。此外，官方还提供了事件监听的函数，用于监听和获取拖拽中的数据变化。

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'
  // }
})

官方地址
https://swapy.tahazsh.com/