Shulou(Shulou.com)06/02 Report--

This article mainly introduces Vue how to customize instructions to achieve element drag related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have something to gain after reading this Vue how to customize instructions to achieve element drag article, let's take a look at it.

I. Custom instruction

Before using custom instructions, have some understanding of custom instructions. Start from the following aspects:

1. Define the scope of custom directives

Global registration and intra-component registration (the scope of registration depends on the actual business requirements)

/ / register a global directive that can be registered within any component using Vue.directive ('focus', {/ / when the bound element is inserted into DOM: inserted: function (el) {/ / focus element el.focus ()}}) / / Only current components can use directives: {focus: {inserted: function (el) {el.focus ()}} / /

2. Hook function

There are some hook functions to choose from for an instruction:

Bind: called only once, the first time an instruction is bound to an element

Inserted: called when the bound element is inserted into the parent node

Update: called when the VNode of the component in which it is located is updated, but may occur before its child VNode update

ComponentUpdated: called after the VNode in which the instruction resides and its child VNode are all updated

Unbind: called only once, when the instruction is unbound from the element

3. Function parameters

The instruction hook function is passed in the following parameters:

El: the element bound by the instruction, which can be used to directly manipulate DOM

Binding: an object that contains the following property:

Name: instruction name

Value: the value bound to the instruction

OldValue: the previous value bound by the instruction

Expression: instruction expression in string form

Arg: the parameter passed to the instruction

Modifiers: an object that contains modifiers

Virtual nodes generated by vnode:Vue compilation

OldVnode: last virtual node

Second, drag to realize

Drag implementation: register the mousedown event with the target Element, and then register the 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 choose inserte's inserted: (el) = > {const target = el.parentElement el.onmousedown = (e) = > {const disX = e.pageX-target.offsetLeft const disY = e.pageY-target.offsetTop _ document.onmousemove = (de) = > {target.style.left = de.pageX-disX + 'px' target.style.top = de. PageY-disY + 'px'} _ document.onmouseup = (de) = > {_ document.onmousemove = _ document.onmouseup = null}

Just use v-drag on top of the Element you need.

This is the end of the article on "how to customize instructions to implement element dragging in Vue". Thank you for reading! I believe that everyone has a certain understanding of "Vue how to customize instructions to achieve element drag" knowledge, if you want to learn more knowledge, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.