“This is the fifth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Hi, I’m from the front End Lab

Because the project has a small requirement to drag and drop freely in the specified area, and it is a little trouble to write pure JS by myself, I spent some time to find this widget.

introduce

Vue-drag-resize is a drag and zoom component

According to the online search of the use of 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
  • Drag-and-drop click events

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

< the template > < div class = "father" > < VueDragResize: w = "100" : h = "100" : z = "1" : x = "10" : y = "10" > / / picture, 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 automatically 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

// Disable drag <vue-drag-resize :isDraggable="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 drag only within the parent element <vue-drag-resize :parent-limitation="true">Copy the code

<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

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

Why write by hand

You don’t know if the shoe fits until you wear it, you don’t know if the wheel works until you expose the problem

Because our project is not only used on computers, but also on electronic whiteboards, there is the problem of adaptation, which may cause position confusion on different devices.

In order to adapt to different electronic whiteboards, we used to specify rem as the unit, but the data passed in by the plugin is in PX units, which can not adapt to different screens

So it’s safest to write a drag element by hand

I have uploaded the main source code of manual drag to Github, concern public number [front-end lab] background response: drag can be obtained

Through the front door, there was a family

Original is not easy, praise, message, share is big brother to write down the power!