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
Sample code for implementing water drop ripple animation button effect with CSS+JS
The code looks like this: <!DOCTYPE html> &...
How to install docker under centos and remotely publish docker in springboot
Table of contents 1. Installation of JDK1.8 under...
Parameters to make iframe transparent
<iframe src="./ads_top_tian.html" all...
Will css loading cause blocking?
Maybe everyone knows that js execution will block...
How to implement a single file component in JS
Table of contents Overview Single file components...
Detailed explanation of using JavaScript WeakMap
A WeakMap object is a collection of key/value pai...
Detailed explanation of js's event loop event queue in the browser
Table of contents Preface Understanding a stack a...
Solution for converting to inline styles in CSS (css-inline)
Talk about the scene Send Email Embedding HTML in...
Vue implements websocket customer service chat function
This article mainly introduces how to implement a...
Vue simple implementation of turntable lottery
This article shares the specific code of Vue to s...
Detailed explanation of the difference between Oracle10 partitions and MySQL partitions
The commonly used Oracle10g partitions are: range...
How to understand Vue's simple state management store mode
Table of contents Overview 1. Define store.js 2. ...
A complete tutorial on using axios encapsulation in vue
Preface Nowadays, in projects, the Axios library ...
web.config (IIS) and .htaccess (Apache) configuration
xml <?xml version="1.0" encoding=&qu...
Example of how to implement master-slave hot standby using Docker+keepalived+nginx
Preface To solve the single point of failure, we ...