This article has shared with you the specific code for Vue to implement image drag sorting for your reference. The specific content is as follows
principle:There is a list of images, drag one of them (trigger dragstart). When the dragged image moves to the position of other images (trigger dragover), the dragged image is moved from its original position to that position (trigger dragend).
dragstart：The dragstart event will fire when the user starts dragging an element or a selection text.
dragover：The dragover event is triggered (triggered every few hundred milliseconds) when an element or selected text is dragged onto a valid placement target.
dragend：The drag and drop event is fired at the end of the drag and drop operation. (We don't need it here)
(1) Image list HTML structure. Add attribute draggable to the element that needs to be dragged. Note here: The key value of the template for loop needs to be unique, because vue will adopt the in-place multiplexing method when rendering. If the key value is unique, the rendered list nodes will not be multiplexed after reordering, which can avoid some problems. (When we insert a 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=''
class="drag-list"
draggable="true"
>
<img :src="" alt="" />
</li>
</ul>
(2) Event: dragstart, dragover binding event onDragStart, onDragOver
onDragStart: Identifies elements that need to be dragged, save them to the state, and is used for the binding event of the dragover during the dragging process.
onDragStart(event){
("start");
= ;
},
onDragOver: An event is triggered when it is on a valid target during the dragging process, and the target element is identified, not the dragged element. First, identify whether the target element is the target element we need. For example, we determine whether it is a li element and determine whether the image is the same as the dragged one, and then insert and drag the element.
Identify the position number of the drag element and the target element, insert the drag element before the target element, and then delete the data at the original position of the drag element. In vue, you only need to perform data operations.
onDragOver(event){
('drag move')
();
let target = ;
//Because dragover will happen on ul, we need to determine whether it is li if ( === "LI" &&
[0].src !== [0].src) {
let idx_drag = this._index()
let idx_target = this._index(target)
let _list =
let _drag = [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)
}
(_list[0].path)
this.$emit("change", _list)
}
},
The complete code is as follows:
<template>
<div class="image-list" v-if="list && ">
<ul class="drag-container"
@dragstart="onDragStart"
@dragover="onDragOver"
@dragend="onDragEnd"
ref="imgList">
<li
v-for="(item,idx) in list"
:key=''
class="drag-list"
draggable="true"
>
<img :src="" alt="" />
</li>
</ul>
</div>
</template>
<script>
export default {
name:"drag-image-list",
props:{
list: Array,
},
data(){
return {
draging:null,//The object being dragged }
},
methods:{
onDragStart(event){
("start");
= ;
},
onDragOver(event){
('drag move')
();
let target = ;
//Because dragover will happen on ul, we need to determine whether it is li if ( === "LI" && [0].src !== [0].src) {
let idx_drag = this._index()
let idx_target = this._index(target)
let _list =
let _drag = [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)
}
(_list[0].path)
}
},
onDragEnd(event){
('end event')
},
_index(el){
var index = 0;
if (!el || !) {
return -1;
}
while (el && (el = )) {
index++;
}
return index;
},
}
}
</script>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.