点击上方蓝字关注我们
IT 咖啡馆，探索无限可能！
恭喜你发现了这个宝藏，这里你会发现优质的开源项目、IT知识和有趣的内容。
现在开发页面的时候，都越来越注重操作性，所以对拖拽操作的支持也是越来越受到使用者的重视。
今天我们分享的开源项目，它是一个小巧的工具，可以通过几行代码，就将网页布局转换为可拖动的，它就是：Swapy
Swapy 是什么
Swapy 是一个与框架无关的工具，只需几行代码就可以 将任何布局转换为可拖动交换的布局。你可以在不大幅修改原有项目结构的情况下，快速的通过增加Swapy，来对页面中的图片、文字等各种内容增加拖拽布局。
整个项目使用Typescript开发，项目的特点有以下：
易于使用：只需几行代码即可实现复杂的拖放功能，极大地减少了开发时间和工作量。
灵活性强：支持各种布局形式，适用于简单的列表和复杂的网格布局。
高性能：即使在大量元素的情况下，也能保持流畅的用户体验。
安装Swapy
NPM安装
首先可以通过熟悉的包管理器来安装，例如使用pnpm
pnpm install swapyCDN安装
你也可以直接在文件中通过CDN的方式来安装swapy，可以参考以下：
<script src="<https://unpkg.com/swapy/dist/swapy.min.js>"></script><script>// You can then use it like thisconst swapy = Swapy.createSwapy(container)</script>
使用Swapy
接下来通过一个简单布局的例子，来看一下如果使用Swapy来实现可拖拽的布局，实际的布局可以按照您想要的复杂程度来。
指定Slots和Item
指定Slots和Item
指定Slots，请为其元素添加
data-swapy-slot="anyNameYouWant"。每个Slots只能包含一个Item。Item是您拖放的内容。
要将元素标记为Item，请添加此数据属性：
data-swapy-item="anyNameYouWant"。
默认情况下，项目可从任意位置拖动。如果你希望制定处理拖动的方式，那么可以增加data-swapy-handle的内容。
[data-swapy-highlighted]：您可以通过 CSS 样式来自定义当前选择的Slot。
页面元素部分的参考代码：
<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
接下来就是获取包含Slots和Item的容器元素，并将其传递给createSwapy()。默认情况下，它将使用“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 wantswapy.enable(true)
监听事件
您可以监听 swap 事件来执行诸如存储新订单之类的操作。为了方便您，swap 事件会返回新订单的三个版本：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'// }})
参考示例
当然现在开发中真的纯的使用原生HTML和JS的很少了，所以项目也考虑到这点，除了基本的使用参考，还提供了基于几个常见框架的代码示例，包括recat、vue、svelte。
这些示例都在代码的example中，可以自行查看。
总结
关于Swapy是一个非常小巧的前端开发工具，它可以快速帮开发解决拖拽相关的需要，尤其是对于相关内容不是很了解的人，仅仅需要添加一些代码，并稍微修改项目，就可以让自己的项目具备可拖拽的效果，还是非常不错的。
项目信息
项目名称：swapy
GitHub 链接：https://github.com/TahaSh/swapy
Star 数：4K
