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.
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:
|
<<: How to connect to docker server using ssh
>>: How to avoid data loop conflicts when MySQL is configured with dual masters
Recommend
Nginx forwarding based on URL parameters
Use scenarios: The jump path needs to be dynamica...
Velocity.js implements page scrolling switching effect
Today I will introduce a small Javascript animati...
Detailed explanation of using the at command for one-time scheduled tasks in Linux
Table of contents Preface 1. Introduction to one-...
Complete steps to use element in vue3.0
Preface: Use the element framework in vue3.0, bec...
Detailed explanation of primitive values and reference values in ECMAScript
Table of contents Preface What are dynamic proper...
Detailed tutorial on installing pxc cluster with docker
Table of contents Preface Preliminary preparation...
Detailed explanation of the process of creating floor navigation effects with JavaScript
Table of contents Objectives for this period 1. F...
How to encapsulate axios in Vue
Table of contents 1. Installation 1. Introduction...
Differences in the hr separator between browsers
When making a web page, you sometimes use a dividi...
JavaScript to achieve simple provincial and municipal linkage
This article shares the specific code for JavaScr...
Use of MySQL query rewrite plugin
Query Rewrite Plugin As of MySQL 5.7.6, MySQL Ser...
Detailed steps for debugging VUE projects in IDEA
To debug js code, you need to write debugger in t...
Tomcat multi-instance deployment and configuration principles
1. Turn off the firewall and transfer the softwar...
HTTP and HTTP Collaboration Web Server Access Flow Diagram
A web server can build multiple web sites with in...
Use a few interview questions to look at the JavaScript execution mechanism
Table of contents Previous words Synchronous and ...