introduce

Vue-drag-resize is a drag and zoom component

Because the project has a small demand for free drag, their pure JS writing and a little trouble, I spent some time to find this team, according to the online search to use the tutorial, are according to the document translation again, can not solve the problem I want

It took a few days, and some tutorials on how to use this component were recorded

  • Simple to use
  • Limit the drag range
  • Modify the default style of the component
  • Drag hierarchy

Introduction and installation

Vue-drag-resize is a drag component specifically for VUE projects, defining elements that can be dragged, scaled, or both; Can limit the maximum and minimum value of drag, drag range beyond its parent element; Touch events are also supported

🤖 installation

npm i -s vue-drag-resize
Copy the code

👨 💻 introduced

<template>
  <div class="father" >
    <VueDragResize
        :w="100" 
        :h="100" 
        :z="1"
        :x="10" 
        :y="10"
    >// Image, div or other elements</VueDragResize>
  </div>
</template>
<script>
import VueDragResize from 'vue-drag-resize'
export default {
  name: 'Drag'.components: {
    VueDragResize
  },
}
</script>
Copy the code

It’s no different from normal component import, but you need to have a parent container to hold the dragged elements, and you need to position the parent container relative to the view window, otherwise the dragged elements will be positioned relative to the view window, right

  • Drag elements default width and height is 200px
  • W can be set to the width of an element without a unitautoIs the width of the content inside the component
  • H is high
  • X represents the initial offset on the X-axis relative to the parent element
  • Y is the initial position on the Y-axis

After the component is introduced, drag elements can be dragged and scaled. You can use isDraggable to control whether drag is allowed or not. The default is true

// Do not drag
<vue-drag-resize :isDraggable="false">

// Disable scaling
<vue-drag-resize :isResizable="false">
Copy the code

This article mainly introduces drag!!

Limit the drag range

If you do not set the drag range, you can drag across the entire page

You can use parent-limitation to restrict dragging only within the parent element

You can also manually set the width and height of the drag range parentW,parentH

// Specify that you drag only within the parent element
<vue-drag-resize :parent-limitation="true">
Copy the code

// Set the drag range freely
<vue-drag-resize 
  :parentW="2000" 
  :parentH="2000" 
>
Copy the code

Modify the default style of the component

Dragged components have a default dashed border when they are clicked and dragged

You can disable the default dotted line in style

// Remove the default dotted border
.vdr.active:before {
  display：none；
}
Copy the code

👏🏻 drag hierarchy

The hierarchy of vue-drag-resize defaults to the first element being the smallest and then increasing

The project has a requirement that when you drag an element, you always keep the element at the top, so you need to listen for the drag element and set the current element to the highest level

Using the @Clicked event to listen on, when an element is clicked and dragged, you can pass the index of such an element and set the level of that element to highest and others to lowest

< template > < div class = "father" > bag hierarchy {{\ [0]}} watch level {{\ [1]}} < VueDragResize: w = "100" : h = "100" : z = "\ [0]" : x = "10" :y="10" :parent-limitation="true" :is-resizable="false" @clicked="act(0)" @dragging="dragging" > <img src=".. /assets/bag.png" alt="" :style="{width:wid+'px'}" > </VueDragResize> <VueDragResize :w="100" :h="100" :z="temp[1]" :x="200" :y="100" :parent-limitation="true" @clicked="act(1)" @activated="onActivated" > <img src=".. /assets/watch.png" alt="" :style="{width:wid+'px'}" > </VueDragResize> </div> </template> <script> import VueDragResize from 'vue-drag-resize' export default { name: 'Drag', data() { return { temp: [0, 0], } }, components: { VueDragResize }, methods: { act(index) { for(let i=0; i<this.temp.length; i++){ this.temp[i]=1 } this.temp[index]=10 this.$forceUpdate() }, } } </script> <style scoped> .father { height: 400px; width: 700px; border: 1px solid red; position: relative; margin: 0 auto; } .drag{ border: 2px solid red; } </style>Copy the code