moveable组件学习笔记一: moveable

一. 准备阶段

moveable支持拖拽(drag),更改大小(resize),缩放(scale),旋转(rotate)等功能

1.github文档地址(https://github.com/daybrush/moveable) 6.2k个星

2.demo地址

原插件demo https://daybrush.com/moveable/
vue-moveable的demo https://alis.oss.aliyuncs.com/page/moveble/#/

二.文档

1.初始化一个moveable

通过new Moveable(parentElement, options),options都支持先初始化一个实例,后续直接使用.属性名的方式设置

import Moveable from "moveable";

this.moveable = new Moveable(
        this.$refs.container, // moveable元素的父元素
        {
          className: 'draggable', // 可交互组件的class名称
          target: this.$refs.example, // 响应moveable操作结果的元素,如包裹一个可拖拽图钉的方块
          origin: false, // moveable元素的中心点是否可见,default: true
          edge: true, // resize,scale是否支持通过边框操作
          padding: { left: 0, top: 0, right: 0, bottom: 0 }, // target元素周围增加padding,不会改变target样式,只是将moveable选框撑开, default: null
          passDragArea: false, // default: false, [**没有发现实际作用**]
          zoom: 1, // moeable组件的元素缩放比例,default: 1,即边框或者四角和边框的句柄等
          draggable: true, // 是否支持可拖拽
          dragTarget: this.$refs.drag, // 执行moveable操作的元素,如可拖拽的图钉
          resizable: true, // 是否支持更改大小
          scalable: true, // 是否支持缩放
          rotatable: true, // 是否支持旋转
          warpable: true,  // 是否支持折叠,3d效果,增加Z轴
          throttleDrag: 0,
          throttleResize: 0
        }
      );
this.moveable.scalable = false

moveable实例为需要执行moveable操作的moveable对象,包括拖拽句柄或者边框等;
target: 则为响应moveable操作结果的dom元素,即我们真实想要变更的dom

2.事件

  • click
    this.moveable.on("click", (e) => {

    })

3.方法

  • destroy()
    销毁moveable实例,并且移除实例化moveable所产生的元素和监听事件
this.moveable.destroy(); 
// moveable立即执行
this.moveable.request("draggable", { deltaX: 10, deltaY: 10 }, true);
const requester = this.moveable.request("draggable");
requester.request({ deltaX: 10, deltaY: 10 });
requester.request({ deltaX: 10, deltaY: 10 });
requester.request({ deltaX: 10, deltaY: 10 });
requester.requestEnd();
  • dragStart(event)
    moveable实例执行拖动操作,多用于选中dom元素同时直接执行拖动操作
import Moveable from "moveable";
const moveable = new Moveable(document.body);
document.body.addEventListener("mousedown", e => {
      moveable.target = e.target;
      moveable.dragStart(e);
});
  • emit/on/off/once
    事件发送/监听/关闭/监听执行一次,一般用作跨组件传值交互
import EventEmitter from "@scena/event-emitter"; // moveable插件本身依赖于@scena/event-emitter,安装moveable时会同步安装@scena/event-emitter
const emitter = new EventEmitter();
emitter.on("a", e => {
});
emitter.emit("a", {
  a: 1,
});
emitter.once("a", () => {
});
// 移除emitter实例的所有监听事件
emitter.off();
// 移除a事件的所有监听事件
emitter.off("a");
// 移除a事件的名为listener的监听事件
emitter.off("a", listener);
  • trigger(eventName, param)
    直接调用eventName方法,返回方法执行是否成功,即使eventName未被监听,或者关闭监听,tigger依旧可以被执行,且返回结果为true
import EventEmitter from "@scena/event-emitter";
const emitter = new EventEmitter();
    emitter.on("a", (e) => {
      console.log(e)
    });
    // emit
    let result1 = emitter.trigger("a", {
      a: 1,
    });
    console.log(result1);
    let result2 = emitter.trigger("a", { a: 3 });
    console.log(result2); // true
    let result3 = emitter.trigger("b", { b: 3 });
    console.log(result3); // true
    emitter.off("a");
    let result4 = emitter.trigger("a", { a: 3 });
    console.log(result4); // true
  • getManager()
    获取一个moveable状态和属性的管理器,即moveablemanager类的实例
const manager = this.moveable.getManager();
  • getRect()
    获取moveable实例的target的边界数据
const rectInfo = this.moveable.getRect();
console.log(rectInfo); // {width, height, left, top... }
  • hitTest(el | HitRect)
    el或者HitRect类型的数据与moveable.target的碰撞检测,返回值为number
document.body.addEventListener("mousedown", e => {
   console.log(this.moveable.hitTest(e.target))
});
  • isDragging()
    检测moveable是否正处于drag状态
console.log(this.moveable.isDragging()); // false
this.moveable.on("dragStart", () => {
  console.log(moveable.isDragging()); // true
});
this.moveable.on("drag", () => {
  console.log(moveable.isDragging()); // true
});
this.moveable.on("dragEnd", () => {
  console.log(moveable.isDragging()); // false
});
  • isInside(clientX, clientY)
    校验传入点位是否在moveable内部
document.body.addEventListener("mousedown", e => {
    if (this.moveable.isInside(e.clientX, e.clientY)) {
         console.log("inside");
    }
});
  • isMoveableElement(target)
    校验传入的target是否是moveable实例的target
document.body.addEventListener("click", e => {
    if (!this.moveable.isMoveableElement(e.target)) {
         this.moveable.target = e.target;
    }
});
  • updateRect
    如果所有元素的宽高位置发生变化(即触发浏览器重排),调用此方法更新moveable
window.addEventListener("resize", e => {
    this.moveable.updateRect();
});
  • updateTarget
    如果所有元素的宽高位置发生变化(即触发浏览器重排),调用此方法更新moveable
this.moveable.updateTarget();
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容