Vue implements image dragging and sorting

This article example shares the specific code of Vue to implement image dragging and sorting for your reference. The specific content is as follows

Principle: There is a list of pictures. Drag one of the pictures (triggering dragstart). When the dragged picture moves to the position of other pictures (triggering dragover), the dragged picture is moved from its original position to that position (triggering dragend).

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

dragover: When an element or selected text is dragged over a valid drop target, the dragover event is triggered (once every few hundred milliseconds).

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 image list . Add the attribute draggable to the element that needs to be dragged. Please note here: the key value of the template for loop needs to be unique, because Vue will use in-place reuse 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 will insert certain data into the array according to the sequence number)

 <ul class="drag-container" 
            @dragstart="onDragStart"
            @dragover="onDragOver"
            @dragend="onDragEnd"
            ref="imgList">
            <li 
            v-for="(item,idx) in list" 
            :key='item.path'
            class="drag-list" 
            draggable="true" 
            >
                <img :src="item.path" alt="" />
            </li>
</ul>

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

onDragStart: Identifies the element to be dragged and saves it in the state for use by the dragover binding event during the dragging process.

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

onDragOver: The event is triggered when the element is on a valid target during the dragging process. The target element is identified instead of the dragged element. First, identify whether the target element is the target element we need. In our example, determine whether it is a li element, and determine whether the image is the same as the dragged one, then insert the dragged element.
Identify the position numbers of the dragged element and the target element, insert the dragged element before the target element, and then delete the data at the original position of the dragged element. In Vue, you only need to perform data operations.

onDragOver(event){
            console.log('drag move')
            event.preventDefault();
            let target = event.target;
                //Because dragover will occur on ul, it is necessary 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.dragging)
                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,0,_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:

<template>
    <div class="image-list" v-if="list && list.length">
        <ul class="drag-container" 
        @dragstart="onDragStart"
        @dragover="onDragOver"
        @dragend="onDragEnd"
        ref="imgList">
            <li 
            v-for="(item,idx) in list" 
            :key='item.path'
            class="drag-list" 
            draggable="true" 
            >
                <img :src="item.path" alt="" />
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name:"drag-image-list",
    props:{
        list: Array,
    },
    data(){
        return {
            dragging:null, //The object being dragged}
    },
    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 occur on ul, it is necessary 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.dragging)
                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,0,_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.parentNode) {
                return -1;
            }
            while (el && (el = el.previousElementSibling)) {
                index++;
            }
            return index;
        },
    }
}
</script>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Vue plugin draggable realizes the order of dragging and moving pictures
Detailed explanation of how to use vuedraggable, a drag-and-drop sorting plugin for Vue
Vue component Draggable implements drag function
How to drag pictures to sort in Vue.Draggable

<<: How to connect to docker server using ssh

>>: How to avoid data loop conflicts when MySQL is configured with dual masters

Detailed explanation of performance monitoring of MySQL server using Prometheus and Grafana

Vue implements image dragging and sorting

Detailed explanation of performance monitoring of MySQL server using Prometheus and Grafana

Detailed explanation of outfile, dumpfile, load_file functions in MySQL injection

How to set up PostgreSQL startup on Ubuntu 16.04

Usage of the target attribute of the html tag a

Command to view binlog file creation time in Linux

Introduction to using Unicode characters in web pages (&#,\u, etc.)

HTML table markup tutorial (10): cell padding attribute CELLPADDING

MySQL starts slow SQL and analyzes the causes

How to set up URL link in Nginx server

How to install pip package in Linux

Recommend

How to implement Docker to dynamically pass parameters to Springboot projects

JS implements the dragging and placeholder functions of elements

Detailed explanation of MySQL three-value logic and NULL

Installation and use of Ubuntu 18.04 Server version (picture and text)

Introduction to Semantic HTML Tags

What is a MySQL tablespace?

Summary of horizontal scrolling website design

jQuery+h5 realizes the nine-square lottery special effect (front-end and back-end code)

Solutions to problems related to software package dependency reporting during installation in Linux

A brief analysis of MySQL parallel replication

Parse CSS to extract image theme color function (tips)

Implementation of Docker to build Zookeeper&Kafka cluster

Methods and steps to upgrade MySql5.x to MySql8.x

Vue implements a simple magnifying glass effect

CSS3 implements missing corner rectangle, folded corner rectangle and missing corner border