cao_drag v1.0.8

Cao_drag

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

安装

Install the package using npm:

npm install cao_drag

用法实例

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

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

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

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

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

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

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

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

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

<cao-box>
  <!-- 支持一个插槽 -->
</cao-box>

/* CSS */
<!-- 采用内联式 -->

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

注意

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