# float-dom-demo

**Repository Path**: xsw1999/float-dom-demo

## Basic Information

- **Project Name**: float-dom-demo
- **Description**: 让你的dom动起来
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-06-01
- **Last Updated**: 2024-12-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: TypeScript, 悬浮球

## README

# 介绍
让页面上的dom变成浮动节点，只需指定 移动范围 ，和 被移动的节点，即可快速实现悬浮效果
* 此插件可同时在手机端（h5）和pc端上使用，无需做其他调整

> 此插件提供了让节点在某一个区域内自动悬浮的方法，任何一个节点都可被当成悬浮球使用

> 内置resize方法，无需外部调用

# 效果
![image](./public/demo.gif)

# 示例代码
[点此跳转](https://gitee.com/xsw1999/float-dom-demo) 
```js
npm install
npm run dev
```

# 快速开始
## 安装
```js
npm install float-dom
```
## 使用
```js

import Float from 'float-dom';

let rangeNode = document.getElementById('xxxx')
let floatNode = document.getElementById('xxxx')
let options = 

new Float(
  rangeNode,    // 指定节点为移动范围
  floatNode,    // 指定可悬浮节点
  {
    margin: 10,
    position: 'br', // bottom-right
  },
  () => {
    console.log('click')
  }
)
```

# 初始化参数说明
| 属性 | 说明 | 类型 | 默认值 |
| - | - | - | - |
| rangeNode | 悬浮节点可移动的范围 | HTMLElement | - |
| floatNode | 可悬浮的节点 | HTMLElement | - |
| options | 配置项 | Object | {} |
| clickCallback | 点击悬浮节点的回调 | Function | - |

## options 配置说明
| 属性 | 说明 | 类型 | 默认值 |
| - | - | - | - |
| margin | 与边栏保持的距离 | number | 0 |
| position | 初始位置：tl-左上 / tr-右上 / bl-左下 / br-右下 | number | br |