Vue3DraggableResizable知识点

2024-06-20 1722阅读

一、npm上介绍 

网址：vue3-draggable-resizable - npm

 1、安装、下载

npm下载插件

$ npm install vue3-draggable-resizable

文件中引入：全局注册

// >main.js
import { createApp } from 'vue'
import App from './App.vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
 
// You will have a global component named "Vue3DraggableResizable"
createApp(App)
  .use(Vue3DraggableResizable)
  .mount('#app')

 在组件中使用

// >component.js
import { defineComponent } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
 
export default defineComponent({
  components: { Vue3DraggableResizable }
  // ...other
})

 示范案例：

  
    
      
        This is a test example
      
    
  

 

import { defineComponent } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
export default defineComponent({
  components: { Vue3DraggableResizable },
  data() {
    return {
      x: 100,
      y: 100,
      h: 100,
      w: 100,
      active: false
    }
  },
  methods: {
    print(val) {
      console.log(val)
    }
  }
})


.parent {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 100px;
  left: 100px;
  border: 1px solid #000;
  user-select: none;
}

2、参数Props

1.设置长宽高等

initW：设置宽度；

 

initH：设置高度；
 

 

w：容器的当前宽度(px)，您可以使用“v-model:w”使其保持最新状态；
 

 

h：容器的当前高度(px)，您可以使用“v-model:h”使其保持最新状态；
 

x：容器的当前距离左边的距离(px)，您可以使用“v-model:x”使其保持最新状态；
 

y：容器的当前距离顶部的距离(px)，您可以使用“v-model:y”使其保持最新状态；
 

minW：设置最小宽度；
 

 

minH：设置最小高度；
 
 

2.设置状态
 

active：显示该组件是否被选中，您可以使用“v-model:active”使其保持最新状态；
 

 

draggable：定义组件是否可拖动；
 

 

resizable：定义组件是否可调整大小；
 

lockAspectRatio：lockAspectRatio属性用于锁定长宽比；
 

disabledX：定义组件是否可以在x轴上移动；
 

disabledY：定义组件是否可以在y轴上移动；
 

disabledW：定义组件的宽度是否可以修改；
 

disabledH：定义组件的高度是否可以修改；
 

parent：限制父节点内的移动和大小；
 

 

handles：定义枚举的大小数组来限制元素的大小调整
 

default: ['tl', 'tm', 'tr', 'ml', 'mr', 'bl', 'bm', 'br']
 
 

  • tl : Top left
  • tm : Top middle
  • tr : Top right
  • mr : Middle right
  • ml : Middle left
  • bl : Bottom left
  • bm : Bottom middle
  • br : Bottom right

     

    3.是否开启某设置
     

    classNameDraggable：用于在启用可拖动组件时设置可拖动可调整大小的组件的自定义类；
     

     

    classNameResizable：用于在拖动时设置可拖动可调整大小的组件的自定义类；
     

    classNameDragging：用于在拖动时设置可拖动可调整大小的组件的自定义类；
     

    classNameResizing：用于在调整大小时设置可拖动可调整大小的组件的自定义类；
     

    classNameActive：用于在活动时设置可拖动可调整大小的组件的自定义类；
     

    classNameHandle：用于设置每个句柄元素的自定义公共类。
     
 

    二、Vue3DraggableResizable
     
 
 
    [Vue3 组件] 用于拖拽调整位置和大小的的组件，同时支持冲突检测，元素吸附对齐，实时参考线。
     
 

    文档目录
     
 

    • 特性
    • 使用方法 
  
      • 组件 Props
      • 组件 Events
      • 使用吸附对齐功能
      特性
       

      • 支持拖拽和缩放，可分别定义开启或关闭
      • 自定义缩放句柄（缩放时共有八个方位可操作，可分别定义开启或关闭）
      • 限制组件的拖动和缩放在其父节点内
      • 自定义组件内各种类名
      • 缩放句柄的类名也可自定义
      • 元素吸附对齐
      • 实时参考线
      • 自定义参考线
      • 使用 Vue3 和 ts

        1、使用
         

        $ npm install vue3-draggable-resizable
         

        使用 use 方法注册组件
         

        // >main.js
import { createApp } from 'vue'
import App from './App.vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//需引入默认样式
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
// 你将会获得一个名为Vue3DraggableResizable的全局组件
createApp(App)
  .use(Vue3DraggableResizable)
  .mount('#app')
         

        也可以单独在你的组件内部使用
         

        // >component.js
import { defineComponent } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//需引入默认样式
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
export default defineComponent({
  components: { Vue3DraggableResizable }
  // ...other
})
         

        下面是一个使用 vue-template 语法写的例子
         

          
    
      
        This is a test example
      
    
  


import { defineComponent } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
export default defineComponent({
  components: { Vue3DraggableResizable },
  data() {
    return {
      x: 100,
      y: 100,
      h: 100,
      w: 100,
      active: false
    }
  },
  methods: {
    print(val) {
      console.log(val)
    }
  }
})


.parent {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 100px;
  left: 100px;
  border: 1px solid #000;
  user-select: none;
}

         

        2、Props
         

        initW
         

        type: Number
        default: null
         

        设置初始宽度（px）
         

         

        initH
         

        type: Number
        default: null
         

        设置初始高度（px）
         

         

        w
         

        type: Number
        default: 0
         

        组件的当前宽度（px）
        你可以使用“v-model:w”语法使它和父组件保持一致
         

         

        h
         

        type: Number
        default: 0
         

        组件的当前高度（px）
        你可以使用“v-model:h”语法使它和父组件保持一致
         

         

        x
         

        type: Number
        default: 0
         

        组件距离父容器的左侧的距离（px）
        你可以使用“v-model:x”语法使它和父组件保持一致
         

         

        y
         

        type: Number
        default: 0
         

        组件距离父容器顶部的距离（px）
        你可以使用“v-model:y”语法使它和父组件保持一致
         

         

        minW
         

        type: Number
        default: 20
         

        组件的最小宽度（px）
         

         

        minH
         

        type: Number
        default: 20
         

        组件的最小高度（px）
         

         

        active
         

        type: Boolean
        default: false
         

        组件当前是否处于活跃状态
        你可以使用“v-model:active”语法使它和父组件保持一致
         

         

        draggable
         

        type: Boolean
        default: true
         

        组件是否可拖动
         

         

        resizable
         

        type: Boolean
        default: true
         

        组件是否可调整大小
         

         

        lockAspectRatio
         

        type: Boolean
        default: false
         

        该属性用来设置是否锁定比例
         

         

        disabledX
         

        type: Boolean
        default: false
         

        是否禁止组件在 X 轴上移动
         

         

        disabledY
         

        type: Boolean
        default: false
         

        是否禁止组件在 Y 轴上移动
         

         

        disabledW
         

        type: Boolean
        default: false
         

        是否禁止组件修改宽度
         

         

        disabledH
         

        type: Boolean
        default: false
         

        是否禁止组件修改高度
         

         

        parent
         

        type: Boolean
        default: false
         

        是否将组件的拖动和缩放限制在其父节点内，即组件不会超出父节点，默认关闭
         

         

        handles
         

        type: Array
        default: ['tl', 'tm', 'tr', 'ml', 'mr', 'bl', 'bm', 'br']
         

        定义缩放的句柄（共八个方向）
         

        • tl : 上左
        • tm : 上中
        • tr : 上右
        • mr : 中左
        • ml : 中右
        • bl : 下左
        • bm : 下中
        • br : 下右

           

          classNameDraggable
           

          type: String
          default: draggable
           

          自定义组件的类名，该类名在组件是“可拖动”时显示
           

           

          classNameResizable
           

          type: String
          default: resizable
           

          自定义组件类名，该类名在组件是“可缩放”时显示
           

           

          classNameDragging
           

          type: String
          default: dragging
           

          定义组件在拖动时显示的类名
           

           

          classNameResizing
           

          type: String
          default: resizing
           

          定义组件在缩放时显示的类名
           

           

          classNameActive
           

          type: String
          default: active
           

          定义组件在活跃状态下的类名
           

           

          classNameHandle
           

          type: String
          default: handle
           

          定义缩放句柄的类名
           

           

          以上设置将会渲染出下面的缩放句柄节点（my-handle-*）
           

          ...

...
           

          3、Events
           
 

          activated
           

          payload: -
           

          组件从非活跃状态到活跃状态时触发
           

           

          deactivated
           

          payload: -
           

          组件从活跃状态到非活跃状态时触发
           

           

          drag-start
           

          payload: { x: number, y: number }
           

          组件开始拖动时触发
           

           

          dragging
           

          payload: { x: number, y: number }v
           

          组件在拖动过程中持续触发
           

           

          drag-end
           

          payload: { x: number, y: number }
           

          组件拖动结束时触发
           

           

          resize-start
           

          payload: { x: number, y: number, w: number, h: number }
           

          组件开始缩放时触发
           

           

          resizing
           

          payload: { x: number, y: number, w: number, h: number }
           

          组件在缩放过程中持续触发
           

           

          resize-end
           

          payload: { x: number, y: number, w: number, h: number }
           

          组件缩放结束时触发
           

           

           

          使用吸附对齐功能
           

          吸附对齐功能可以在拖动过程中和其他元素自动吸附，你也可以自定义吸附对齐的校准线
           

          你需要引入另外一个组件来使用该特性
           

          像下面这样，将 Vue3DraggableResizable 放在 DraggableContainer 内：
           

            
    
      
        
          Test
        
        
          Another test
        
      
    
  


import { defineComponent } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
// 这个组件不是默认导出的，
// 如果你之前是通过“app.use(Vue3DraggableResizable)”注册的，
// 那么你这里就不需要再引入了，因为DraggableContainer这个已经被全局注册了，你可以直接使用
import { DraggableContainer } from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
export default defineComponent({
  components: { Vue3DraggableResizable, DraggableContainer }
})


.parent {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 100px;
  left: 100px;
  border: 1px solid #000;
  user-select: none;
}

           

          4、DraggableContainer Props
           
 

          这些 props 适用于 DraggableContainer 组件
           

          disabled
           

          type: Boolean
          default: false
           

          关闭吸附对齐功能
           

            
    Test
  
  
    Another test
  

           

          adsorbParent
           

          type: Boolean
          default: true
           

          是否和父组件对齐，如果开启，则元素拖拽到父容器边缘（父容器的上中下左中右边）时会发生吸附，否则不会
           

            
    Test
  
  
    Another test
  

           

          adsorbCols
           

          type: Array
          default: null
           

          自定义列的校准线，元素在x轴上拖动到这些线附近时，会产生吸附
           

            
    Test
  
  
    Another test
  

           

          adsorbRows
           

          type: Array
          default: null
           

          自定义行的校准线，元素在y轴上拖动到这些线附近时，会产生吸附
           

            
    Test
  
  
    Another test
  

           

          referenceLineVisible
           

          type: Boolean
          default: true
           

          是否显示实时参考线，元素在产生自动吸附后，会有一条参考线线出现，如果不需要，可通过该选项关闭。
           

            
    Test
  
  
    Another test
  

           

          referenceLineColor
           

          type: String
          default: #f00
           

          实时参考线的颜色，默认红色
           

            
    Test
  
  
    Another test
  

           
 

          3、事件
           

          1.activated
           

           

          2.deactivated
           

          3.drag-start
           

           

          4.dragging
           

          5.drag-end
           

          6.resize-start
           

          7.resizing
           

          8.resize-end
           
 

          三、vue3基础组件使用
           

          网址：Vue3DragResizeRotate
           

          • 基本组件
          • 自适应大小
          • 最小宽高限制
          • 最大宽高限制
          • 组件插槽
          • 控制是否处于活动状态
          • 阻止失活
          • 是否允许拖动位置
          • 是否允许调整大小
          • 是否允许旋转角度 (新增)
          • 是否允许内部元素拖拽
          • 限制允许拖动的范围
          • 限制禁止拖动的范围
          • 控制组件的z-index
          • 控制拉伸手柄的数量
          • 限制运动轴
          • 限制用户选择
          • 放缩 (新增)

            1、基本
             

            1.基本组件
             

            最基本的组件，没有任何道具，甚至可以在父元素之外自由移动。
             

              
    基本组件
    
      
        
            你可以拖着我，按照自己的意愿调整大小。1
            
      
      
        
            你可以拖着我，按照自己的意愿调整大小。2
            
      
    
  

             

            2.自适应大小
             

              
    自适应大小
    
      随便填一点内容，我会自动适应大小
    
  

             

            3.最小宽高限制
             

            具有Min Height和Min Width基本组件的基本组件，最小高度和最小宽度分别由:minw 和:minh 属性控制。
             

              
    
      min Width:
      
      min Height:
      
    
    
      
        
          
            基本组件，可以配置
            
          minWidth
          和
          minHeight
          属性
          
            w:{{ w }},h:{{ h }}
            
        
      
    
  


export default {
  data() {
    return {
      minWidth: 200,
      minHeight: 200,
      w: 200,
      h: 200
    };
  },
  methods: {
    onResize: function (x, y, width, height) {
      this.w = width;
      this.h = height;
    }
  }
};

             

            4.最大宽高限制
             

            具有Max Height和Max Width基本组件的基本组件，最大高度和最大宽度分别由 :max-height 和:max-width 属性控制。
             

            5.组件插槽
             

            一个基本组件，内部有一个表单。 输入应该是可聚焦的，按钮应该是可点击的。
             

              
    组件插槽
    
      
        
            基本组件内插入表单
            
        
          
          Submit
        
      
    
  


export default {
  methods: {
    onSubmit(e) {
      console.log(e);
      alert("You just submitted the form!");
    }
  }
};

             

            6.控制是否处于活动状态
             

            一个基本组件，带有active prop，用于控制组件外部的活动状态。
             

              
    
      
      Toggle Active1
      
      Toggle Active2
    
    
      
        
            
          外部组件通过控制
          :active
          prop来控制组件的激活状态
        
            
      
      
        
            
          外部组件通过控制
          :active
          prop来控制组件的激活状态
        
            
      
    
  


export default {
  data() {
    return {
      active1: false,
      active2: false
    };
  },
  methods: {}
};

             

            7.阻止失活
             

            一个基本组件，带有prevent-deactivation prop，以避免在外部点击时解除活动状态。
             

              
    外部点击不会失活
    
      
        
            
          设置
          :prevent-deactivation
          属性，让组件不能取消激活状态
        
            
      
      
        
            
          设置
          :prevent-deactivation
          属性，让组件不能取消激活状态
        
            
      
    
  


             

            8.是否允许拖动位置
             

            一个基本组件，draggable prop设置为false，因此它不可拖动。
             

            9.是否允许调整大小
             

            一个基本组件，resizable prop设置为false，因此它不可调整大小。
             

            10.是否允许旋转角度
             

            一个基本组件，rotatable prop设置为true，因此它可以旋转角度。
             

            11.是否允许内部元素拖拽
             

            一个基本组件，enable-native-drag prop设置为true，以允许组件内部元素的拖动行为。 您可以通过使用球拖动每个组件来查看差异。 默认值为false。
             

              
    允许内部元素拖拽
    
      
        
            不允许浏览器原生JavaScript拖拽
            
        
            Native drag disabled. Try to drag the component from the ball.
            
        
            允许浏览器原生JavaScript拖拽
            
        
            Native drag enabled. Try to drag the component from the ball.
            
        
             

            12.限制允许拖动的范围
             

            一个基本组件，只能通过一个句柄拖动，由prop drag-handle 和一个有效的CSS选择器来指定，只能通过该DOM元素来拖动组件。
             

              
    限制允许拖动的范围
    
      
        
          Drag Only Here
        
      
    
  


export default {
  data() {
    return {
      list: [
        { zIndex: 1, x: 100, y: 100, color: 'red', },
        { zIndex: 2, x: 250, y: 200, color: 'green' },
        { zIndex: 3, x: 400, y: 100, color: 'blue', }
      ]
    }
  },
  methods: {
    onActivated(index) {
      console.log('onActivated', index)
      const indexs  = this.list.map(item => item.zIndex);
      const maxIndex = Math.max(...indexs);
      this.list[index].zIndex = maxIndex + 1;
    }
  }
};


.full-box {
  width: 100%;
  height: 100%;
}

             

            13.限制禁止拖动的范围
             

            一个基本组件，无法通过句柄拖动，由prop drag-cancel 和有效的CSS选择器来指定，该范围无法将无法拖动组件。
             

              
    限制禁止拖动的范围
    
      
        Cannot Drag Here
      
    
  

             

            14.控制组件的z-index
             

            一个基本组件，使用z-index prop来控制组件外部的z-index。 如果没有提供，它将采用值auto。
             

              
    
      Change z-index:
      
    
    
      
        
          通过
          :z属性
          
            控制组件的z-index:{{ z }}层级
            
        
      
      
        1
      
      
        9
      
    
  


export default {
  data() {
    return {
      z: 0
    };
  }
};

             

            15.控制拉伸手柄的数量
             

            您可以使用handles prop选择要为组件提供的句柄，它接受句柄数组。 例如，如果你想仅在横轴上进行成本调整，你只能提供左右句柄：handles =“['ml'，'mr']”。
             

              
    
      
        
        {{ handle }}
      
    
    
      
        
            Enable/disable handles.
            
        
            • 
            {{ handle }} - {{ handles[handle] ? "✓" : "✗" }}
          
              • 
        
            
      
    
  


export default {
  data() {
    return {
      handles: {
        tl: true,
        tm: true,
        tr: true,
        mr: true,
        br: true,
        bm: true,
        bl: true,
        ml: true
      }
    };
  },
  computed: {
    enabledHandles() {
      return Object.keys(this.handles).filter(handle => this.handles[handle] === true);
    }
  }
};


.vdr ul,
.VueDragResizeRotate ul {
  margin: 0 0 0 25px;
}
 

            16.限制运动轴
             

            一个基本组件，使用axis来控制可拖动的轴。 合适的值是x，y或both。
             

              
    
      
        
        X
      
      
        
        Y
      
    
    
      
        
            Draggable on {{ axis }} axis.
            
      
    
  


export default {
  data() {
    return {
      x: true,
      y: true
    };
  },
  computed: {
    axis() {
      if (this.x && this.y) return "both";
      if (this.x) return "x";
      if (this.y) return "y";
      return false;
    }
  }
};


             

            17.限制用户选择
             

            阻止用户选中组件内文本
             

              
    
      
      Toggle disableUserSelect1
      
      Toggle disableUserSelect2
    
    
      
        
            
          你
          {{ disableUserSelect1 ? "不可以" : "可以" }}
          选择组件内部的的文字，不妨双击试试!!!
          
            
          :disableUserSelect
          prop equal to {{ disableUserSelect1 }}.
        
            
      
      
        
            
          你
          {{ disableUserSelect2 ? "不可以" : "可以" }}
          选择组件内部的的文字，不妨双击试试!!!
          
            
          :disableUserSelect
          prop equal to {{ disableUserSelect2 }}.
        
            
      
    
  


export default {
  data() {
    return {
      disableUserSelect1: false,
      disableUserSelect2: false
    };
  }
};

             

            18.放缩 
             

            放缩时，建议保持父元素盒子和vue-drag-resize-rotate放缩值保持一致
             

              
    
      
      scaleRatio
    
    
      
        
            位置为({{ position.x }},{{ position.y }})
            
        
            大小为({{ position.w }},{{ position.h }})
            
        
            角度为{{ angle }}
            
      
    
  


export default {
  data() {
    return {
      rotatable: true,
      position: {
        x: 0,
        y: 0,
        w: 200,
        h: 200
      },
      angle: 0,
      scaleRatio: 1
    };
  },
  methods: {
    rotating(val) {
      this.angle = val;
    },
    resizing(x, y, w, h) {
      this.position = { x, y, w, h };
    },
    containerStyle() {
      return {
        transform: `scale(${this.scaleRatio})`
      };
    }
  }
};


#toolbar {
  display: flex;
  align-items: center;
}
.container {
  transform-origin: left top;
}

             

            2、网格对齐
             

            1.网格20x20
             

            一个基本组件，用grid = [20,20] prop来设置网格单元的尺寸（高度和宽度，以像素为单位）。
             

              
    Size: {{ width }} x {{ height }}
    
      
        
          
            Grid 20x20 starting from the top-left corner
            
        
      
    
  


export default {
  data() {
    return {
      width: 200,
      height: 200,
      style: {
        position: "relative",
        height: "100%",
        width: "100%",
        backgroundColor: "#808080",
        background:
          "linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)",
        backgroundSize: "20px 20px, 20px 20px"
      }
    };
  },
  methods: {
    onResizing(x, y, width, height) {
      this.width = width;
      this.height = height;
    }
  }
};

             

            2.网格20x40
             

            3.网格20x20+偏移10x10
             

            始终从组件的左上角计算网格。 在此示例中，您可以看到它相对于父元素具有偏移量。 这对于父元素中的成本要求很重要。
             

              
    Size: {{ width }} x {{ height }}
    
      
        
          
            Grid 20x20 starting with a 10x10 offset
            
        
      
    
  


export default {
  data() {
    return {
      width: 200,
      height: 200,
      style: {
        position: "relative",
        height: "100%",
        width: "100%",
        backgroundColor: "#808080",
        background:
          "linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)",
        backgroundSize: "20px 20px, 20px 20px",
        backgroundPosition: "10px 10px"
      }
    };
  },
  methods: {
    onResizing(x, y, width, height) {
      this.width = width;
      this.height = height;
    }
  }
};

             

            4.网格20x40+偏移10x20+最小限制
             

            如果您提供的minHeight和minWidth值低于相应的网格值，您可以注意到调整大小会停止到最低的合适值。 例如，在x轴上，尊重minWidth和grid [x]约束的最低有效值是40.同样适用于y轴。
             

              
    Size: {{ width }} x {{ height }}
    
      
        
          
            Grid 20x40 starting with a 10x20 offset and min height, min width values equal to 30.
            
        
      
    
  


export default {
  data() {
    return {
      width: 200,
      height: 200,
      style: {
        position: "relative",
        backgroundColor: "#808080",
        height: "100%",
        width: "100%",
        background:
          "linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)",
        backgroundSize: "20px 40px, 20px 40px",
        backgroundPosition: "10px 20px"
      }
    };
  },
  methods: {
    onResizing(x, y, width, height) {
      this.width = width;
      this.height = height;
    }
  }
};


             

            5.网格20x40+偏移10x20+最大限制
             

            如果提供的maxHeight和maxWidth值高于相应的网格值，则可以注意到调整大小会停止到较低的合适值。 例如，在x轴上，尊重maxWidth和grid [x]约束的最低有效值是80.这同样适用于y轴。
             
 

            3、父级限制
             

            1.父级容器基本案例
             

            无法在其父元素之外拖动或调整大小的组件，使用prop ：parent =“true”定义。
             

              
    父级容器基本案例
    
      
        
            你不能将当前组件拖动或调整大小超过父元素容器
            
      
    
  

             

            2.父级+自适应
             

              
    父级+自适应
    
      随便填一点东西
    
  

             

            3.父级+最大限制
             

            无法在其父元素之外拖动或调整大小的组件，使用 maxWidth 和 maxHeight 来限制其大小。
             

              
    Size: {{ width }} x {{ height }}
    
      
        
            
          Component costrained in parent with
          maxWidth
          and
          maxHeight
          equal to 300.
        
            
      
    
  


export default {
  data() {
    return {
      width: 200,
      height: 200
    };
  },
  methods: {
    onResizing(x, y, width, height) {
      this.width = width;
      this.height = height;
    }
  }
};

             

            4.父级+网格
             

            附加到网格的组件，不能在其父元素之外拖动或调整大小，使用prop ：parent =“true”定义。 在这种情况下，父级的大小完全匹配网格。
             

              
    父级+网格
    
      
        
          
            You cannot move me or resize me outside my parent.
            
        
      
    
  


export default {
  data() {
    return {
      style: {
        position: "relative",
        backgroundColor: "#808080",
        background:
          "linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)",
        backgroundSize: "20px 20px, 20px 20px",
        height: "100%",
        width: "100%"
      }
    };
  }
};

             

            5.父级+网格+偏移
             

            组件附加到具有小偏移的网格。 它的起始位置与父级的左上角不完全对齐。
             

              
    父级限制+网格+偏移
    
      
        
          
            You cannot move me or resize me outside my parent. And my edges cannot touch the parent element.
            
        
      
    
  


export default {
  data() {
    return {
      style: {
        position: "relative",
        backgroundColor: "#808080",
        background:
          "linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)",
        backgroundSize: "20px 20px, 20px 20px",
        backgroundPosition: "10px 10px",
        width: "100%",
        height: "100%",
        boxSizing: "border-box"
      }
    };
  }
};

             

            6.父级+网格+最大限制
             

            附加到网格的组件，无法在其父元素之外拖动或调整大小，使用 maxWidth 和 maxHeight 来限制其大小。 __Notice__使用20作为grid prop为 y轴，元素的maxHeight是280而不是290。
             

              
    Size: {{ width }} x {{ height }}
    
      
        
          
            
            Component costrained in parent with
            maxWidth
            and
            maxHeight
            equal to 290.
          
            
        
      
    
  


export default {
  data() {
    return {
      width: 200,
      height: 200,
      style: {
        position: "relative",
        backgroundColor: "#808080",
        background:
          "linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)",
        backgroundSize: "10px 20px, 10px 20px",
        width: "100%",
        height: "100%",
        boxSizing: "border-box"
      }
    };
  },
  methods: {
    onResizing(x, y, width, height) {
      this.width = width;
      this.height = height;
    }
  }
};

             

            7.父级+控制组件
             

            一个基本的父控制组件，x ，y ，w 和h 用于控制组件位置和大小的道具。 __Notice__使用grid prop，组件只会对网格值的有效倍数作出反应。
             

              
    
      X:
      
      Y:
      
      Width:
      
      Height:
      
    
    
      
        
          
            You cannot move me or resize me outside my parent.
            
        
      
    
  


export default {
  data() {
    return {
      x: 10,
      y: 10,
      w: 100,
      h: 100,
      style: {
        position: "relative",
        backgroundColor: "#808080",
        background:
          "linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)",
        backgroundSize: "20px 20px, 20px 20px",
        backgroundPosition: "10px 10px",
        width: "100%",
        height: "100%",
        boxSizing: "border-box"
      }
    };
  },
  methods: {
    onDrag(left, top) {
      this.x = left;
      this.y = top;
    },
    onResize(left, top, width, height) {
      this.x = left;
      this.y = top;
      this.w = width;
      this.h = height;
    }
  }
};

             

             

            4、纵横比 
             

            1.锁定纵横比
             

            具有lock-aspect-ratio prop的组件，用于在调整大小期间保持组件的宽高比。
             

              
    
      
      Toggle Lock Aspect Ratio
    
    
      
        
            
          Keep aspect ratio using
          :lock-aspect-ratio
          prop.
        
            
      
    
  


export default {
  data() {
    return {
      ratio: true
    };
  }
};

             

            2.纵横比+最小限制
             

            一个组件，lock-aspect-ratio prop和最小高度设置为100，最小宽度设置为50.请注意，锁定纵横比也会强制最小宽度为100（条件：1 / 1）。
             

              
    Size: {{ width }} x {{ height }}
    
      
        
            
          Keep aspect ratio and set
          minHeight
          to 100 and
          minWidth
          to 50.
        
            
      
    
  


export default {
  data() {
    return {
      width: 200,
      height: 200
    };
  },
  methods: {
    onResizing(x, y, width, height) {
      this.width = width;
      this.height = height;
    }
  }
};

             

            3.纵横比+最大限制
             

            一个组件，lock-aspect-ratio prop和 maxWidth 设置为300， maxHeight 设置为250。 请注意，锁定纵横比也会强制最大宽度为250。
             

            4.纵横比+父级容器限制
             

            在父级中使用的组件，lock-aspect-ratio prop用于在调整大小期间保持组件的宽高比。
             

              
    
    
      
        
            Combine aspect ratio and costrain in parent.
            
      
    
  

             

            5.纵横比+对齐网格
             

            具有宽高比的组件在20x20网格上进行了受限
             

            使用lock-aspect-ratio时，在网格上使用组件的成本并不是很好。 您可以通过拖动（例如右手柄或底部手柄）来注意到您有不同的结果。
             

              
    
    
      
        
          
            Keep aspect ratio in component costrained on grid.
            
        
      
    
  


export default {
  data() {
    return {
      style: {
        position: "relative",
        backgroundColor: "#808080",
        height: "100%",
        background:
          "linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)",
        backgroundSize: "20px 20px, 20px 20px"
      }
    };
  }
};

             

            6.在偏移的网格上对齐
             

              
    
    
      
        
          
            Aspect ratio in Grid 20x40 starting with a 10x20 offset
            
        
      
    
  


export default {
  data() {
    return {
      style: {
        position: "relative",
        backgroundColor: "#808080",
        height: "100%",
        background:
          "linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)",
        backgroundSize: "20px 40px, 20px 40px",
        backgroundPosition: "10px 20px"
      }
    };
  }
};

             

            7.在父级中对齐网格
             

              
    
    
      
        
          
            Keep aspect ratio, grid and parent costrained.
            
        
      
    
  


export default {
  data() {
    return {
      style: {
        position: "relative",
        backgroundColor: "#808080",
        background:
          "linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)",
        backgroundSize: "20px 20px, 20px 20px",
        height: "100%",
        width: "100%",
        boxSizing: "border-box"
      }
    };
  }
};

             

            8.外部传入纵横比参数 (新增)
             

            具有lock-aspect-ratio prop的组件，用于在调整大小期间保持组件的宽高比。
            设置outsideAspectRatio来控制组件的纵横比
             

              
    
      
      Toggle Lock Aspect Ratio
      
    
    
      
        
            
          Keep aspect ratio using
          :lock-aspect-ratio
          prop.
        
            
      
    
  


export default {
  data() {
    return {
      ratio: true,
      outsideAspectRatio: 1.7777
    };
  }
};

             

             

            5、样式
             

            1.Style 组件
             

            具有自定义类名的组件，由prop class-name 提供。
             

              
    具有自定义类名的组件
    
      
        
            
          你可以给组件设置一个类名，覆盖其默认类名
          class-name
        
            
      
    
  


.my-class {
  border: 1px solid red;
  -webkit-transition: background-color 200ms linear;
  -ms-transition: background-color 200ms linear;
  transition: background-color 200ms linear;
}

             

            2.Style 拖动
             

            在拖动时具有自定义类名的组件，由prop class-name-dragging 提供。
             

              
    拖动时具有自定义类名的组件
    
      
        
            
          你也可以设置组件处于拖拽式的类名
          class-name-dragging
        
            
      
    
  


.my-class {
  border: 1px solid red;
  -webkit-transition: background-color 200ms linear;
  -ms-transition: background-color 200ms linear;
  transition: background-color 200ms linear;
}
.my-dragging-class {
  background-color: red;
  border: 1px solid black;
}

             

            3.Style 拉伸
             

            调整大小时具有自定义类名的组件，由prop class-name-resizing 提供。
             

            4.Style 活跃
             

            在活动状态下具有自定义类名的组件，由prop class-name-active 提供。
             

            5.Style 句柄
             

            具有handle的自定义类的组件，随prop class-name-handle 提供。 这样，您可以单独设置每个手柄的样式。
             

            记得为句柄类设置position：absolute
             
 

            6.Style 手柄插槽
             

            具有句柄自定义标记的组件，由VueJS named slots提供（例如slot =“tl”）。
             

            Slots | Vue.js
             

              
    具有句柄自定义标记的组件
    
      
        
            The first child will populate the default slot.
            
        😀
        😂
        😆
        😉
        😎
        😍
        😣
        😕
      
    
  


             

            6、事件
             

            1.激活组件事件
             

            当组件被激活时，会发出activated()事件。 当组件被停用时，会发出deactivated()事件。
             

              
    点击激活组件activated和取消激活deactivated
    
      
        
            这个组件正处于激活状态
            
      
    
  


export default {
  data() {
    return {
      active: false
    };
  },
  methods: {
    onActivated() {
      this.active = true;
    },
    onDeactivated() {
      this.active = false;
    }
  }
};

             

            2.拖动位置事件
             

            拖动组件时会发出dragging(x,y)事件。 拖动停止时会发生dragstop(x,y)事件。
             

              
    拖动组件触发事件dragging和停止拖拽dragstop
    
      
        
            
          {{ dragging ? "你正在拖动" : "我就待在这里" }}
          
            
          X: {{ x }} / Y: {{ y }}
        
            
      
    
  


export default {
  data() {
    return {
      dragging: false,
      x: 0,
      y: 0
    };
  },
  beforeUnmount: function () {
    clearTimeout(this.timer);
  },
  methods: {
    onDrag: function (x, y) {
      this.dragging = true;
      this.x = x;
      this.y = y;
    },
    onDragStop: function (x, y) {
      console.log(x,y)
      this.dragging = false;
    }
  }
};

             

            3.调整大小事件
             

            调整组件大小时会发出resizing(x,y,width,height)事件。 调整大小停止时会发出resizestop(x,y,width,height)事件。
             

              
    调整大小触发事件resizing和停止调整resizestop
    
      
        
            
          {{ resizing ? "你正在调整大小" : "这个大小还行" }}
          
            
          X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}
        
            
      
    
  


export default {
  data() {
    return {
      resizing: false,
      x: 0,
      y: 0,
      width: 200,
      height: 200
    };
  },
  methods: {
    onResize: function (x, y, width, height) {
      this.resizing = true;
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
    },
    onResizeStop: function () {
      this.resizing = false;
      console.log(arguments);
    }
  }
};

             

            4.旋转角度事件 
             

              
    调整旋转角度触发事件rotating和rotatestop
    
      
        
            
          {{ rotating ? "你正在旋转" : "这个角度刚刚好" }}
          
            
          Rotate: {{ rotate }}
        
            
      
    
  


export default {
  data() {
    return {
      rotating: false,
      x: 0,
      y: 0,
      width: 200,
      height: 200,
      rotate: 0
    };
  },
  methods: {
    onRotating: function (degree) {
      this.resizing = true;
      this.rotate = degree;
    },
    onRotateStop: function (degree) {
      this.resizing = false;
      this.rotate = degree;
    }
  }
};

             

             

            7、高级
             

            1.位置冲突检测
             

            开启冲突检测时，各个可拖拽组件之间不可重叠，冲突后当前元素回到原来的位置
             

              
    位置冲突检测
    
      
      
    
  

             

            2.元素位置吸附
             

            设置:snap="true"开启吸附功能和设置:snapTolerance="20"可控制吸附判断距离
             

              
    位置吸附对齐
    
      
      
    
  

             

            3.对齐时有辅助线
             

            返回参数是一个Object,里面包含vLine与hLine，具体使用参考下面代码。
             

              
    对齐时出现辅助线
    
      
      
      
      
      
    
  


export default {
  data() {
    return {
      vLine: [],
      hLine: []
    };
  },
  methods: {
    getRefLineParams(params) {
      const { vLine, hLine } = params;
      this.vLine = vLine;
      this.hLine = hLine;
    }
  }
};


.ref-line {
  position: absolute;
  background-color: rgb(219, 89, 110);
  z-index: 9999;
}
.v-line {
  width: 1px;
}
.h-line {
  height: 1px;
}

             
 
 

            8、应用
             

            1.同时拖动多个元素(20)
             

            默认情况下，这不是组件提供的功能，但它是如何使用现有功能构建复杂方案的示例。
             

            由于ctrl事件处理程序的注册方式，请确保在开始拖动元素之前单击容器内的任何位置。
             

              
    
      
        同时拖动多个内部元素(20个)
        
        Synchronize (Use
        ctrl
        Key)
      
    
    
      
        
            {{ element.text }}
            
      
    
  


export default {
  data() {
    return {
      sync: false,
      draggingId: null,
      prevOffsetX: 0,
      prevOffsetY: 0,
      count: 20,
      batchable: false,
      elements: []
    };
  },
  computed: {
    draggingElement: function () {
      if (!this.draggingId) return;
      return this.elements.find(el => el.id === this.draggingId);
    }
  },
  created() {
    this.fillElements();
  },
  mounted() {
    window.addEventListener("keydown", ev => {
      if (ev.keyCode === 17) {
        this.sync = true;
      }
    });
    window.addEventListener("keyup", ev => {
      if (ev.keyCode === 17) {
        this.sync = false;
      }
    });
  },
  methods: {
    fillElements() {
      for (let i = 1; i  {
        if (el.id !== id) {
          el.x += deltaX;
          el.y += deltaY;
        }
      });
    },
    dragstop(id, left, top) {
      this.elements.map(el => {
        if (el.id === id) {
          el.x = left;
          el.y = top;
        }
        return el;
      });
      this.draggingId = null;
      this.prevOffsetX = 0;
      this.prevOffsetY = 0;
    },
    deltaX(offsetX) {
      const ret = offsetX - this.prevOffsetX;
      this.prevOffsetX = offsetX;
      return ret;
    },
    deltaY(offsetY) {
      const ret = offsetY - this.prevOffsetY;
      this.prevOffsetY = offsetY;
      return ret;
    }
  }
};


VPS购买请点击我
		

		
		

		免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们，邮箱：ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!		
			

	




	
相关阅读

	


				

		
	





	
目录[+]