npm install -D drag-layout
<template>
<div class="boxEle"></div>
</template>
import { DragLayout, ScrrenType } from "drag-layout";
const boxEle = document.querySelector('.boxEle')
const dragLayout = new DragLayout(boxEle, {
screenWidth: 375,
firstScreenHeight: 1000,
threshold: 40,
adsorption: true,
adsorptionThreshold: 20,
handleResize(spirit, ouputConfig) {
// 容器调整大小监听
},
handleMoved(spirit, ouputConfig) {
// 容器移动监听
},
handleDrop(event, offset) {
// 屏幕的原生ondrop事件监听
// 可以通过该事件进行添加容器
},
scrrenType: ScrrenType.BLOCK_CONTAINER,
})
::: tip
通过DragLayout
创建实例,绑定到.boxEle
的dom进行初始化面板。
通过config配置屏幕的模式和其它功能
:::
- 描述: 将已有的dom元素添加到屏幕内,可选定容器的类型
- 示例:
import { SpiritType } from 'drag-layout'
const ele = document.createElement('div')
ele.height = '100%'
ele.style.background = '#f00'
dragLayout.addSpirit({
resizable: false,
type: SpiritType.DEFAULT,
height: 200,
render: ele,
left: 0,
top: 0
});
:::tip 上述代码将会再屏幕顶端添加一个高度为200px的红色容器 :::
- 描述: 通过
draggable
给组件列表添加拖拽属性,再通过初始化实例时注册的handleDrop
事件添加到屏幕中 - 实现思路:
- 给组件列表添加
draggable
属性- 通过自定义属性给组件添加组件类型标识
- 通过
dragstart
事件给拖拽事件透传组件类型- 监听
handleDrop
事件,获取dragstart
透传的组件类型和拖拽的坐标- 根据组件类型和坐标将新的容器添加到目标位置
- 示例:
<div class="boxEle"></div>
<div
draggable="true"
data-component-type="banner"
ondragstart="handleDragstart"
>
我是一个banner组件
</div>
import { SpiritType, DragLayout } from 'drag-layout'
const boxEle = document.querySelector('.boxEle')
// 通过ondragstart透传需要创建的组件类型
function handleDragstart (event: DragEvent) {
event.dataTransfer.setData(
"type",
(event.target as any).getAttribute("data-component-type")
);
}
const dragLayout = new DragLayout(boxEle, {
screenWidth: 375,
firstScreenHeight: 1000,
threshold: 40,
adsorption: true,
adsorptionThreshold: 20,
handleResize(spirit, ouputConfig) {
// 容器调整大小监听
},
handleMoved(spirit, ouputConfig) {
// 容器移动监听
},
handleDrop(event, offset) {
// 屏幕的原生ondrop事件监听
const type = event.dataTransfer.getData("type");
switch (type) {
const bannerEl = document.createElement('div')
// ...bannerEl的一系列封装
case "banner": {
dragLayout.addSpirit({
left: offset.x,
top: offset.y,
height: 300,
render: bannerEl
});
break;
}
}
},
})
- 描述: 获取所有配置信息,包括所有容器的配置和屏幕相关配置,可以用于保存到服务端用以下次恢复
- 示例:
const info = dragLayout.getInfo()
console.log(info)
- 描述: 考虑到实际应用场景下数据结构比较复杂,可以通过配置
infoDataBridge
对数据进行预处理,infoDataBridge
方法会传入容器的配置参数 - 示例:
new DragLayout(boxEle, {
screenWidth: 375,
infoDataBridge: (config: IOuputSpiritConfig) => {
const _config = { ...config }
_config.width *= 10
_config.height *= 10
return _config
}
})
:::tip 上述例子将会将所有容器的宽高*10后输出 :::
- 描述: 通过容器的实例获取其当前的配置信息
- 示例:
const spirit = dragLayout.addSpirit({
left: 10,
top: 10,
height: 300,
render: el
});
console.log(spirit.ouputConfig)
- 描述: 屏幕相关的全局配置通过实例化
DragLayout
时注入,而容器可以通loadSpirits
方法批量导入 - 示例:
<div class=".boxEle"></div>
import { DragLayout } from 'drag-layout'
const config = {
...
} // 服务端拿到的配置文件
const dragLayout = new DragLayout(boxEle, {
screenWidth: config.screenWidth,
firstScreenHeight: config.firstScreenHeight,
threshold: config.threshold,
adsorption: config.adsorption,
adsorptionThreshold: config.adsorptionThreshold,
handleResize(spirit, ouputConfig) {
// 容器调整大小监听
},
handleMoved(spirit, ouputConfig) {
// 容器移动监听
},
handleDrop(event, offset) {
// 屏幕的原生ondrop事件监听
// 可以通过该事件进行添加容器
},
})
dragLayout.loadSpirits(config.list)
- 描述: 通过设置屏幕的缩放比例可以更好显示不同屏幕尺寸下的内容
- 示例:
dragLayout.setScale(0.7)