# cao_drag

> 1.实现物体拖拽. 2.实现物体大小的改变. 3.实现大小改变和颜色切换.

Latest version **1.0.8** (published 2023-08-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install cao_drag
pnpm add cao_drag
yarn add cao_drag
bun add cao_drag
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2023-08-21 |
| First published | 2023-08-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | cao777 |
| Maintainers | cao777 |

## Links

- npm: https://www.npmjs.com/package/cao_drag
- npm.io page: https://npm.io/package/cao_drag

## Recent versions

- 1.0.8 (latest) — 2023-08-21
- 1.0.1 — 2023-08-20
- 1.0.0 — 2023-08-20

## README

# Cao_drag

简单实现物体的拖拽以及改变物体的大小

## 安装

Install the package using npm:

```sh
npm install cao_drag

```

## 用法实例

### 1.DragBox.js---实现物体拖拽

``` HTML
<div id="parentContainer">
  <div class="draggable drag"></div>
</div>
```

``` CSS
.draggable{
      width: 100px;
      height: 100px;
      background-color: blue;
      position: absolute;
      cursor: pointer;
    }
```

``` JavaScript
//要定义父元素,类名支持自定义,加上类名后元素支持拖拽
//引入文件
 <script src="...src/DragBox.js"></script>
 const dragInstance = new Drag('parentContainer','drag'); 
```


### 2.ChangeBox.js---实现物体的大小改变

``` HTML
<div class="resize" id="resizeBox"></div>
```

``` CSS
.resize{
  width: 100px;
  height: 100px;
  background-color: rgb(0, 255, 166);
  cursor: pointer;
  /* 必需 */
  overflow: hidden;
  resize: both;
}
```

``` JavaScript
 <script src="...src/ChangeBox.js"></script>
  //将需要使用放大缩小功能的元素的id传入
  const resizableBox = new ResizableBox('resizeBox');
```


### 3.CaoBox.js---自定义标签,使用<cao-box></cao-box>即可使用右击鼠标打开菜单,修改大小和颜色

```HTML
<cao-box>
  <!-- 支持一个插槽 -->
</cao-box>
```
  
``` CSS
/* CSS */
<!-- 采用内联式 -->
```

``` JavaScript
 <script src="...src/CaoBox.js"></script>
```


## 注意

**三个插件可以配合使用,注意使用的规则**

---
_Source: https://npm.io/package/cao_drag · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._