moveable组件学习笔记五:snap磁吸贴边效果

snappable磁吸

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

1.属性

this.moveable = new Moveable(
        this.$refs.content, // moveable元素的父元素
        {
          className: "moveable", // 可交互组件的class名称
          target: this.$refs.example, // movable元素
          origin: false, // movable元素的中心点是否可见,default: true
          /**拖拽属性 */
          draggable: true, // 是否支持可拖拽,default: false
          /**更改大小属性 */
          resizable: true, // 是否支持更改大小
          snappable: true, // 是否初始化磁吸功能
          snapContainer: this.$refs.container, // 磁吸功能(辅助线)的容器
          snapThreshold: 10, // 磁吸效果触发的临界值,即元素与辅助线间距小于x,则自动贴边
          bounds: this.$refs.content.getBoundingClientRect(), // moveable操作元素的外边界值(即包裹moveable元素的dom内边界){left, top, right, bottom}
          innerBounds: this.$refs.inner.getBoundingClientRect(), // moveable操作元素的内边界值(即moveable元素包裹的dom的外边界){left, top, right, bottom}
          elementGuidelines: [this.$refs.content], // 磁吸效果辅助线的dom列表
          elementSnapDirections: {
            left: true,
            top: true,
            right: true,
            bottom: true,
            center: true,
            middle: true,
          }, // 每个dom的磁吸辅助线的方位,默认四边 default: { left: true, top: true, right: true, bottom: true }
          // horizontalGuidelines: [100, 200, 300, 400], // 水平方向自定义的辅助线列表,[注意:此属性是相对于整个snapContainer元素的坐标]
          // verticalGuidelines: [100, 200, 300, 400], // 垂直方向自定义的辅助线列表,[注意:此属性是相对于整个snapContainer元素的坐标] 
          isDisplaySnapDigit: true, // 是否展示与磁吸辅助线的距离,当moveable元素在磁吸参照元素之外时,moveable元素距离磁吸元素辅助线的虚线长度
          isDisplayInnerSnapDigit: true, // 是否展示与磁吸辅助线的距离,当moveable元素内部存在磁吸参照元素时,moveable元素距离磁吸元素辅助线的虚线长度
          snapDirections: { left: true, top: true, right: true, bottom: true, center: true, middle: true }, // moveable的target所需要触发磁吸效果的方位,默认上下左右四条边default: { left: true, top: true, right: true, bottom: true }
          snapDistFormat: v => `${v}px`, // 元素与辅助线之间距离的展示文本
          // snapGap: true, // 暂未发现实际作用 当moveable元素拖动时,元素与辅助线之间是否有空隙default: true(实际测试时,值更改为true或false,未发现实际效果,可能是我的应用场景不对)
          // snapGridHeight: 50, // 暂未发现实际作用
          // snapGridWidth: 50, // 暂未发现实际作用
          // snapDigit: 10, // 暂未发现实际作用
        }
      );

2.事件

• snap

// this.moveable.on('snap', this.snap)
snap(e) {
      const { 
      currentTarget, // 当前操作的moveable实例
      elements, // [element] 与moveable发生磁吸交互的dom元素: 即elementGuidelines中的元素
      eventType, // 事件类型:"snap"
      gaps, // 元素之间的间隙[暂未发现实际作用,该数组一直是空数组]
      guidelines, // horizontalGuideline和verticalGuidelines(包括bounds和innerBounds)中与moveable发生交互的辅助线数组
      stop // function类型[暂未发现实际作用]
       } = e
      console.log(e);
    },