嗨，大家好，我是徐小夕，之前一直在研究可视化零代码相关的技术实践，也做了很多可视化搭建的产品，比如：
- H5-Dooring（页面可视化搭建平台）
- V6.Dooring（数据大屏可视化平台）
- formManager（表单搭建引擎）
- Next-Admin（基于nextjs和antd5.0的中后台管理系统）
最近在研发智能搭建系统（WEP）的时候发现一款非常好用的可视化拖拽插件------draggable 。它在 github 上有17.4k star，提供了很多非常精美的拖拽案例， 我们使用它可以轻松实现可视化拖拽，组件排序，网格拖拽等效果，而且浏览器兼容性也非常不错，原生 javascript 开发， 可以轻松集成到 react， vue 等主流框架中。
接下来我就和大家一起介绍一下这款开源插件。
安装与使用
我们可以使用如下方式安装：
bash
# yarn add shopify/draggable
pnpm add shopify/draggable在项目里使用：
js
import {
Draggable,
Sortable,
Droppable,
Swappable,
} from 'shopify/draggable'github地址： https://github.com/Shopify/draggable
接下来我就来和大家分享几个非常有价值的使用案例。
1. 3D效果拖拽
代码实现：
js
// eslint-disable-next-line import/no-unresolved
import {Draggable} from '@shopify/draggable';
// eslint-disable-next-line shopify/strict-component-boundaries
import Plate from '../../components/Plate';
export default function Home() {
const containerSelector = '#Home .PlateWrapper';
const container = document.querySelector(containerSelector);
if (!container) {
return false;
}
const draggable = new Draggable(container, {
draggable: '.Plate',
});
const plates = new Plate(container);
// --- Draggable events --- //
draggable.on('drag:start', (evt) => {
plates.setThreshold();
plates.setInitialMousePosition(evt.sensorEvent);
});
draggable.on('drag:move', (evt) => {
// rAF seems to cause the animation to get stuck?
// requestAnimationFrame(() => {});
plates.dragWarp(evt.source, evt.sensorEvent);
});
draggable.on('drag:stop', () => {
plates.resetWarp();
});
return draggable;
}2. 可拖拽的开关效果
代码如下：
js
// eslint-disable-next-line import/no-unresolved
import {Draggable} from '@shopify/draggable';
function translateMirror(mirror, mirrorCoords, containerRect) {
if (mirrorCoords.top < containerRect.top || mirrorCoords.left < containerRect.left) {
return;
}
requestAnimationFrame(() => {
mirror.style.transform = `translate3d(${mirrorCoords.left}px, ${mirrorCoords.top}px, 0)`;
});
}
function calcOffset(offset) {
return offset * 2 * 0.5;
}
export default function DragEvents() {
const toggleClass = 'PillSwitch--isOn';
const containers = document.querySelectorAll('#DragEvents .PillSwitch');
if (containers.length === 0) {
return false;
}
const draggable = new Draggable(containers, {
draggable: '.PillSwitchControl',
delay: 0,
});
let isToggled = false;
let initialMousePosition;
let containerRect;
let dragRect;
let dragThreshold;
let headings;
let headingText;
// --- Draggable events --- //
draggable.on('drag:start', (evt) => {
initialMousePosition = {
x: evt.sensorEvent.clientX,
y: evt.sensorEvent.clientY,
};
});
draggable.on('mirror:created', (evt) => {
containerRect = evt.sourceContainer.getBoundingClientRect();
dragRect = evt.source.getBoundingClientRect();
const containerRectQuarter = containerRect.width / 4;
dragThreshold = isToggled ? containerRectQuarter * -1 : containerRectQuarter;
headings = {
source: evt.originalSource.querySelector('[data-switch-on]'),
mirror: evt.mirror.querySelector('[data-switch-on]'),
};
headingText = {
on: headings.source.dataset.switchOn,
off: headings.source.dataset.switchOff,
};
});
draggable.on('mirror:move', (evt) => {
evt.cancel();
const offsetX = calcOffset(evt.sensorEvent.clientX - initialMousePosition.x);
const offsetY = calcOffset(initialMousePosition.y - evt.sensorEvent.clientY);
const offsetValue = offsetX > offsetY ? offsetX : offsetY;
const mirrorCoords = {
top: dragRect.top - offsetValue,
left: dragRect.left + offsetValue,
};
translateMirror(evt.mirror, mirrorCoords, containerRect);
if (isToggled && offsetValue < dragThreshold) {
evt.sourceContainer.classList.remove(toggleClass);
headings.source.textContent = headingText.off;
headings.mirror.textContent = headingText.off;
isToggled = false;
} else if (!isToggled && offsetValue > dragThreshold) {
evt.sourceContainer.classList.add(toggleClass);
headings.source.textContent = headingText.on;
headings.mirror.textContent = headingText.on;
isToggled = true;
}
});
const triggerMouseUpOnESC = (evt) => {
if (evt.key === 'Escape') {
draggable.cancel();
}
};
draggable.on('drag:start', () => {
document.addEventListener('keyup', triggerMouseUpOnESC);
});
return draggable;
}3.可拖拽的网格元素
源码地址： https://github.com/Shopify/draggable/tree/master/examples/src/content/Droppable/UniqueDropzone
4. 可拖拽的列表
源码地址： https://github.com/Shopify/draggable/tree/master/examples/src/content/Sortable/SimpleList
5. 卡牌拖拽效果
源码地址： https://github.com/Shopify/draggable/tree/master/examples/src/content/Sortable/Transformed
6. 多容器拖拽效果
源码地址： https://github.com/Shopify/draggable/tree/master/examples/src/content/Sortable/MultipleContainers
7. 不规则网格拖拽
源码地址：https://github.com/Shopify/draggable/tree/master/examples/src/content/Swappable/Floated
8. 拖拽排序动画
源码地址： https://github.com/Shopify/draggable/tree/master/examples/src/content/Plugins/SortAnimation
当然还有很多有意思的拖拽案例， 大家也可以去体验一下。
今天就分享到这啦，祝大家节日快乐， 博学！
如果有收获，记得点赞 + 再看哦， 欢迎在评论区评论， 分享你的收藏干货~