draggable 拖拽

https://daybrush.com/moveable/release/latest/doc/Moveable.Draggable.html

1. 屬性

this.moveable = new Moveable(
  this.$refs.container, // moveable元素的父元素
  {
      className: 'draggable', // 可交互組件的class名稱
      target: this.$refs.example, // 響應(yīng)moveable操作結(jié)果的元素
      origin: false, // moveable元素的中心點(diǎn)是否可見,default: true
      /**拖拽屬性 */
      draggable: true, // 是否支持可拖拽,default: false
      edgeDraggable: true, // 是否支持拖拽邊框移動(dòng), default: false
      startDragRotate: 45, // 拖拽起始位置的角度(deg): default: 0
      throttleDragRotate: 90, // 拖拽角度的分割單位(deg): 拖拽角度角度可固定,default: 0,則為可以360deg拖動(dòng), 90則是以元素中心點(diǎn)固定為四個(gè)可拖拽方向 90deg 180deg 270deg 360deg
     throttleDrag: 100, // 拖拽時(shí)節(jié)流的單位(px),即每次拖拽最小拖動(dòng)單位為100px,
  }
);

throttleDrag屬性與startDragRotate和throttleDragRotate屬性互斥,同時(shí)存在,則只有startDragRotate和throttleDragRotate屬性生效,throttleDrag優(yōu)先級(jí)更低

2 事件

drag事件有dragStart,drag,dragEnd三種,通過moveable實(shí)例的on方法添加監(jiān)聽事件,返回值event

• drag

this.moveable
  .on(
    "drag",
    ({
      currentTarget, // moveable實(shí)例,即this.moveable
      moveable, // moveable的manager對(duì)象, const manager = this.moveable.getManager();
      target, // DOM 初始化moveable的target元素
      clientX, // number 鼠標(biāo)所在屏幕的橫坐標(biāo)
      clientY, // number 鼠標(biāo)實(shí)例所在屏幕的縱坐標(biāo)
      datas,
      inputEvent, // Event 鼠標(biāo)事件mousemove
      beforeDelta, //  [left, top] 相較于上一次,拖拽的delta值
      beforeDist, // [left, top] 相較于上一次,拖拽的數(shù)據(jù)
      beforeTranslate, // [left, top] 元素相較于起始位置的平移數(shù)據(jù)
      delta, //  [left, top] 相較于上一次,拖拽的delta值
      dist, // [left, top] 相較于上一次,拖拽的數(shù)據(jù)
      translate, // [left, top] 元素相較于起始位置的平移數(shù)據(jù)
      transform, // string 元素的transform css屬性值
      left, // number 相較于上一次拖拽數(shù)據(jù),當(dāng)前元素的left屬性的變化值
      top, // number 相較于上一次拖拽數(shù)據(jù),當(dāng)前元素的top屬性的變化值
      bottom, // number 相較于上一次拖拽數(shù)據(jù),當(dāng)前元素的bottom屬性的變化值
      right, // number 相較于上一次拖拽數(shù)據(jù),當(dāng)前元素的right屬性的變化值
      width, // number 可拖拽元素(target)的寬度
      height, // number 可拖拽元素(target)的高度
      isPinch, // 元素是否被壓縮,不包括resize,scale所引起的形變[**暫未證實(shí)具體作用**]
    }) => {
      target.style.transform = `translate(${beforeTranslate[0]}px, ${beforeTranslate[1]}px)`;
    }
  )

• dragStart

this.moveable
  .on(
    "dragStart",
    ({
      setTransform, // (transform: string | string[], index?: number) => void 設(shè)置target初始的transform屬性, setTransform與set同時(shí)僅可使用一個(gè)
      setTransformIndex, // (transformIndex: number) => void  [**暫未證實(shí)具體作用**]
      set, // 設(shè)置初始的translate屬性
      currentTarget,
      moveable,
      target,
      clientX,
      clientY,
      datas,
      inputEvent,
    }) => {
      // setTransform("translate(100px, 100px)");
      // set([100, 100])
    }
  )

• dragEnd

this.moveable
    .on(
          "dragEnd",
          ({
            lastEvent, // 最后一個(gè)拖動(dòng)的事件,如果moveable實(shí)例未被拖動(dòng),則為undefined
            isDrag,  // boolean moveable實(shí)例是否被拖動(dòng)了,此屬性判斷實(shí)例是否被拖動(dòng)不準(zhǔn)確窍育，第一次初始化實(shí)例時(shí)葛虐，該值也為true，實(shí)際上并未發(fā)生drag瑟匆，采用判斷l(xiāng)astEvent是否有值更加準(zhǔn)確
            isDouble,  // boolean moveable實(shí)例是否被雙擊
            currentTarget,
            moveable,
            target,
            clientX,
            clientY,
            datas,
            inputEvent,
          }) => {
            console.log(lastEvent,
            isDrag, 
            isDouble,)
          }
        )

3 方法

• request({x, y, deltaX, deltaY})
  x,y // number, 是元素相對(duì)于window的絕對(duì)位置(單位:px)
  deltaX, deltaY // number, 是元素相對(duì)于父級(jí)容器的相對(duì)位置(單位:px)

dragRequest() {
      const requester = this.moveable.request("draggable");
      requester.request({ deltaX: 10, deltaY: 10 });
      requester.requestEnd();
    },