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(); 

• request(ableName, param, isInstant)
  ableName:moveable的各个元素(draggable,resizeable...)
  param: 执行的参数
  isInstant是否立即执行
  draggable.request:https://daybrush.com/moveable/release/latest/doc/Moveable.Draggable.html#request
  resizeable.request:https://daybrush.com/moveable/release/latest/doc/Moveable.Resizable.html#request
  ...

// 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();