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
Ideas and methods for realizing real-time log reporting with Nginx pure configuration
Table of contents Preface Implementation ideas Im...
How to quickly return to the top from the bottom when there is too much content on the web page
In web front-end development, it is inevitable to ...
How to quickly clean up billions of data in MySQL database
Today I received a disk alarm exception. The 50G ...
Vue simple registration page + send verification code function implementation example
Table of contents 1. Effect display 2. Enhanced v...
Mysql desktop tool SQLyog resources and activation methods say goodbye to the black and white command line
Without further ado, let’s get started with resou...
CSS screen size adaptive implementation example
To achieve CSS screen size adaptation, we must fi...
mysql create database, add users, user authorization practical method
1. Create a MySQL database 1. Create database syn...
Seven different color schemes for website design experience
The color matching in website construction is ver...
Detailed explanation of Angular component projection
Table of contents Overview 1. Simple Example 1. U...
How to install and use Cockpit on CentOS 8/RHEL 8
Cockpit is a web-based server management tool ava...
JavaScript implementation of the Game of Life
Table of contents Concept Introduction Logical ru...
How to deploy Go web applications using Docker
Table of contents Why do we need Docker? Docker d...
Let me teach you how to use font icons in CSS
First of all, what is a font icon? On the surface...
WeChat applet implements waterfall flow paging scrolling loading
This article shares the specific code for WeChat ...
javascript implements web version of pinball game
The web pinball game implemented using javeScript...