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

This article introduces the knowledge of "how to drag and sort pictures with vue". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The details are as follows

Principle: existing a list of pictures, drag one of the pictures (trigger dragstart), when the dragged picture moves to the location of other pictures (trigger dragover), then move the dragged picture from the original position to that location (trigger dragend).

Dragstart: the dragstart event is triggered when the user starts dragging an element or a selection text.

Dragover: the dragover event (triggered every few hundred milliseconds) is triggered when an element or selected text is dragged onto a valid placement target.

Dragend: the drag-and-drop event is triggered when the drag-and-drop operation ends. (we don't need it here.)

(1) HTML structure of picture list. Add the attribute draggable to the element you need to drag. Note here: the key value of the template for loop needs to be unique, because vue will be reused in place when rendering. If the key value is unique, the list nodes rendered after reordering will not be reused, which can avoid some problems. (when we insert, we insert some data into the array according to the sequence number.)

(2) events: dragstart, dragover binding events onDragStart, onDragOver

OnDragStart: identify the elements that need to be dragged and save them to state for use by dragover binding events during dragging.

OnDragStart (event) {console.log ("start"); this.draging = event.target;}

OnDragOver: triggers an event when it is on a valid target during a drag, identifying the target element, not the dragged element. First of all, identify whether the target element is the target element we need, our example to determine whether it is a li element, and determine whether the picture is the same as the drag, then insert the drag element operation.

Identify the position sequence number of the drag element and the target element, insert the drag element in front of the target element, and then delete the data of the original position of the drag element. In vue, you only need to carry out data operations.

OnDragOver (event) {console.log ('drag move') event.preventDefault (); let target = event.target / / because dragover will happen on ul So to determine whether it is li if (target.nodeName = "LI" & & target.childNodes [0] .src! = = this.draging.childNodes [0] .src) {let idx_drag = this._index (this.draging) let idx_target = this._index (target) let _ list = this.list Let _ drag = this.list [IDX _ drag] if (idx_drag > idx_target) {_ list.splice (idx_target) 0pr _ list [IDX _ drag]) _ list.splice (idx_drag+1,1)} else {_ list.splice (idx_target+1,0,_ list [IDX _ drag]) _ list.splice (idx_drag,1)} console.log (_ list [0] .path) this.$emit ("change", _ list)}}

The complete code is as follows:

Export default {name: "drag-image-list", props: {list: Array,}, data () {return {draging:null,// dragged object}}, methods: {onDragStart (event) {console.log ("start"); this.draging = event.target }, onDragOver (event) {console.log ('drag move') event.preventDefault (); let target = event.target / / because dragover will happen on ul So to determine whether it is li if (target.nodeName = "LI" & & target.childNodes [0] .src! = = this.draging.childNodes [0] .src) {let idx_drag = this._index (this.draging) let idx_target = this._index (target) let _ list = this.list let _ drag = this.list [idx_drag] if (idx_drag > idx_target) {_ list.splice (idx_target) 0pr _ list [IDX _ drag]) _ list.splice (idx_drag+1,1)} else {_ list.splice (idx_target+1,0,_ list [IDX _ drag]) _ list.splice (idx_drag,1)} console.log (_ list [0] .path)}}, onDragEnd (event) {console.log ('end event')}, _ index (el) {var index = 0 If (! el | |! el [XSS _ clean]) {return-1;} while (el & & (el = el.previousElementSibling)) {index++;} return index;},}} "how to use vue to sort pictures by dragging" ends here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.