drag-layout

```sh npm install -D drag-layout ``` ## 文档 [查看文档](https://doc.suyuanli.cn/drag-layout/) ## 示例 [基础集成示例](https://www.suyuanli.cn/example/drag-layout) ## 初始化 ```html <template> <div class="boxEle"></div> </template> ```


Keywords
drag, scrren
License
ISC
Install
npm install drag-layout@0.1.4

Documentation

使用指南

安装

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的红色容器 :::

结合html拖拽属性添加容器

  • 描述: 通过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对数据进行预处理,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)