Detailed code for implementing element drag in Vue custom directive

Yesterday, when I was doing a function, multiple boxes pop up at the same time to display multiple table data.

These pop-up boxes are free to drag. Single dragging is done to bind the mousedowm event to the element.

Here I think of custom instructions in Vue to implement them.

1. Custom commands

Before using custom directives, you must have a certain understanding of custom directives. Start from the following aspects:

1. Customize the scope of the command

Global registration and in-component registration (the scope of registration is based on actual business needs)

// Register a global directive that can be used in any component('focus',{
    // When the bound element is inserted into the DOM    inserted: function(el){
        // Focus on elements        ()
    }
})

// Register within the component, only the current component can usedirectives:{
    focus:{
        inserted: function(el){
            ()
        }
    }
}

// use<input v-focus>

2. Hook function

For a directive, there are some hook functions to choose from:

• bind: Only called once, the command is called when the first time it is bound to an element
• inserted: Called when the bound element is inserted into the parent node
• update: The VNode of the component is called when it is updated, but it may occur before its child VNode is updated.
• componentUpdated: Called after the VNode where the directive is located and its child VNode are updated.
• unbind: Only called once, when the command is unbined with the element

3. Function parameters

The command hook function will be passed in the following parameters:

• el: The element bound to the instruction can be used to directly operate the DOM
• binding: an object containing the following property:

name: command name

value: The value bound by the directive

oldValue: The previous value bound to the instruction

expression: a string-form directive expression

arg: Parameters passed to the instruction

modifiers: an object containing modifiers

• vnode: Vue compiled virtual nodes
• oldVnode: Previous virtual node

2. Drag to realize

Implementation of dragging: Register mousedown event for the target Element, and register mousemove and mouseup of the document in this event.

The code is as follows:

directives: {
    drag: {
      //Drag the title bar to change the position of the parent element, so select inserte      inserted: (el) => {
        const target = 
         = (e) => {
          const disX =  - 
          const disY =  - 
           = (de) => {
             =  - disX + 'px'
             =  - disY + 'px'
          }
           = (de) => {
             =  = null
          }
        }
      }
    }
  }

Just use v-drag on the required Element.

This is the end of this article about Vue custom directive element dragging. For more related Vue custom directive element drag content, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!