一. 準(zhǔn)備階段

moveable支持拖拽(drag),更改大小(resize),縮放(scale),旋轉(zhuǎn)(rotate)等功能

1.github文檔地址(https://github.com/daybrush/moveable) 6.2k個(gè)星

2.demo地址

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

二.文檔

1.初始化一個(gè)moveable

通過(guò)new Moveable(parentElement, options),options都支持先初始化一個(gè)實(shí)例,后續(xù)直接使用.屬性名的方式設(shè)置

import Moveable from "moveable";

this.moveable = new Moveable(
        this.$refs.container, // moveable元素的父元素
        {
          className: 'draggable', // 可交互組件的class名稱
          target: this.$refs.example, // 響應(yīng)moveable操作結(jié)果的元素,如包裹一個(gè)可拖拽圖釘?shù)姆綁K
          origin: false, // moveable元素的中心點(diǎn)是否可見(jiàn),default: true
          edge: true, // resize,scale是否支持通過(guò)邊框操作
          padding: { left: 0, top: 0, right: 0, bottom: 0 }, // target元素周圍增加padding,不會(huì)改變target樣式,只是將moveable選框撐開(kāi), default: null
          passDragArea: false, // default: false, [**沒(méi)有發(fā)現(xiàn)實(shí)際作用**]
          zoom: 1, // moeable組件的元素縮放比例,default: 1,即邊框或者四角和邊框的句柄等
          draggable: true, // 是否支持可拖拽
          dragTarget: this.$refs.drag, // 執(zhí)行moveable操作的元素,如可拖拽的圖釘
          resizable: true, // 是否支持更改大小
          scalable: true, // 是否支持縮放
          rotatable: true, // 是否支持旋轉(zhuǎn)
          warpable: true,  // 是否支持折疊,3d效果,增加Z軸
          throttleDrag: 0,
          throttleResize: 0
        }
      );
this.moveable.scalable = false

moveable實(shí)例為需要執(zhí)行moveable操作的moveable對(duì)象,包括拖拽句柄或者邊框等;
target: 則為響應(yīng)moveable操作結(jié)果的dom元素,即我們真實(shí)想要變更的dom

2.事件

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

  })

3.方法

• destroy()
  銷毀moveable實(shí)例,并且移除實(shí)例化moveable所產(chǎn)生的元素和監(jiān)聽(tīng)事件

this.moveable.destroy(); 

• request(ableName, param, isInstant)
  ableName:moveable的各個(gè)元素(draggable,resizeable...)
  param: 執(zhí)行的參數(shù)
  isInstant是否立即執(zhí)行
  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立即執(zhí)行
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實(shí)例執(zhí)行拖動(dòng)操作,多用于選中dom元素同時(shí)直接執(zhí)行拖動(dòng)操作

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
  事件發(fā)送/監(jiān)聽(tīng)/關(guān)閉/監(jiān)聽(tīng)執(zhí)行一次,一般用作跨組件傳值交互

import EventEmitter from "@scena/event-emitter"; // moveable插件本身依賴于@scena/event-emitter,安裝moveable時(shí)會(huì)同步安裝@scena/event-emitter
const emitter = new EventEmitter();
emitter.on("a", e => {
});
emitter.emit("a", {
  a: 1,
});
emitter.once("a", () => {
});
// 移除emitter實(shí)例的所有監(jiān)聽(tīng)事件
emitter.off();
// 移除a事件的所有監(jiān)聽(tīng)事件
emitter.off("a");
// 移除a事件的名為listener的監(jiān)聽(tīng)事件
emitter.off("a", listener);

• trigger(eventName, param)
  直接調(diào)用eventName方法,返回方法執(zhí)行是否成功,即使eventName未被監(jiān)聽(tīng),或者關(guān)閉監(jiān)聽(tīng),tigger依舊可以被執(zhí)行,且返回結(jié)果為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()
  獲取一個(gè)moveable狀態(tài)和屬性的管理器,即moveablemanager類的實(shí)例

const manager = this.moveable.getManager();

• getRect()
  獲取moveable實(shí)例的target的邊界數(shù)據(jù)

const rectInfo = this.moveable.getRect();
console.log(rectInfo); // {width, height, left, top... }

• hitTest(el | HitRect)
  el或者HitRect類型的數(shù)據(jù)與moveable.target的碰撞檢測(cè),返回值為number

document.body.addEventListener("mousedown", e => {
   console.log(this.moveable.hitTest(e.target))
});

• isDragging()
  檢測(cè)moveable是否正處于drag狀態(tài)

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)
  校驗(yàn)傳入點(diǎn)位是否在moveable內(nèi)部

document.body.addEventListener("mousedown", e => {
    if (this.moveable.isInside(e.clientX, e.clientY)) {
         console.log("inside");
    }
});

• isMoveableElement(target)
  校驗(yàn)傳入的target是否是moveable實(shí)例的target

document.body.addEventListener("click", e => {
    if (!this.moveable.isMoveableElement(e.target)) {
         this.moveable.target = e.target;
    }
});

• updateRect
  如果所有元素的寬高位置發(fā)生變化(即觸發(fā)瀏覽器重排),調(diào)用此方法更新moveable

window.addEventListener("resize", e => {
    this.moveable.updateRect();
});

• updateTarget
  如果所有元素的寬高位置發(fā)生變化(即觸發(fā)瀏覽器重排),調(diào)用此方法更新moveable

this.moveable.updateTarget();