How to implement drag and drop add in vue

This article mainly shows you "how to drag and add vue", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to drag and add vue" this article.

Effect picture

There is no judgment on whether to repeat or delete the old data.

Data volume

Code

Draggable is enabled and draggable

@ dragenter.prevent @ dragover.prevent// blocks the browser's default behavior, otherwise a fork will be displayed, which will not look good.

Block default behavior

@ dragleave.stop= "dragleave ($event, 'main')"

Entering and leaving the current element will trigger

@ dragend.stop= "dragEnd ($event, item)"

Drop drag and drop content trigger

Drag events and properties

Mark this is very important! This determines the behavior of the drag event. When the click starts to drag, the location where the mouse is clicked is the mark.

Dragstart: executed when the mouse is clicked and moved.

Drag: after the dragstart is executed, the mouse is triggered continuously as it moves.

Dragend: triggered when the drag-and-drop behavior ends, that is, when the mouse is released.

Dragenter: triggered when the tag of the element being dragged enters a Dom element, it triggers itself first. The entered Dom element triggers this event.

Dragover: triggered when the tag of the dragged element moves over the incoming Dom element, as well as when it moves itself.

Dragleave: triggered when the dragged element leaves the incoming Dom.

H5 drag property draggable

Draggable: when you need an element to drag and drop, you need to set it to true. Default is false. Selected text, pictures, and links can be dragged by default.

DataTransfer object: this property is used to hold drag-and-drop data and interactive information. This component is not used and is ignored for the time being.

It will be appended when the mouse moves over the target div box, and the simple one is the most illustrative.

Data sources {{item.Name}} data sources {{item.Name}} export default {name:'', components: {}, props: {dataOrigin: {type: Array}, space: {type: Array}} Data () {return {spaceList: this.space, isDragStatus: false}}, computed: {}, watch: {}, created () {}, mounted () {}, methods: {dragleave (e, item) {/ / console.log (e Item) if (item = = 'main') {this.isDragStatus = true} else {this.isDragStatus = false} / / console.log (this.isDragStatus)}, dragstart (e, item) {/ / console.log (e, item)}, dragEnd (e Item) {const top = this.$refs.MyShuttleRight.getBoundingClientRect (). Top const right = this.$refs.MyShuttleRight.getBoundingClientRect (). Right const bottom = this.$refs.MyShuttleRight.getBoundingClientRect (). Bottom const left = this.$refs.MyShuttleRight.getBoundingClientRect (). Left console.log (top, right, bottom, left) console.log (e.clientX, e.clientY, item) if (this.isDragStatus & e.clientY > top & & e.clientY

< bottom && e.clientX >

Left & & e.clientX < right) {this.spaceList.push (item) console.log (this.spaceList.indexOf (item)}. MyShuttle {width: 100%; height: 308px; display: flex; justify-content: space-between; / / left and right box public style. MyShuttleLeft, .MyShuttleRight {border: 1px solid # dddddd; border-collapse: collapse; .title {box-sizing: border-box Width: 100%; height: 40px; background: # f5f5f5; border-radius: 4px 4px 0px 0px; border-bottom: 1px solid # dddddd; padding: 10px 16px; font-size: 14px; font-family: PingFangSC-Regular, PingFangSC; font-weight: 400; color: # 333333; line-height: 20px;} .dataBox {width: 100%; height: 228px Overflow: auto; padding: 6px 0; .dataList {width: 96%; height: 40px; box-sizing: border-box; font-size: 14px; font-family: PingFangSC-Regular, PingFangSC; font-weight: 400; color: # 666; line-height: 20px; margin: 0.2% 10px; padding: 10px 16px Border: 1px solid # ddd; border-radius: 4px; user-select: none; cursor: pointer; &: hover {color: # 01bc77; background: rgba (1,188,119,0.1);} .MyShuttleLeft {width: 362px; height: 100%; background: # ffffff; border-radius: 4px } .MyShuttleCenter {width: 64px; height: 100%;} .MyShuttleRight {width: 362px; height: 100%; background: # ffffff; border-radius: 4px;}} above is all the content of the article "how to drag and drop add vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!