Vue实现拖放排序功能的实例代码

Vue中实现拖放排序,啥也不说,贴上代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<style>

ul {

min-height: 100px;

width: 200px;

margin: 20px auto;

background: #eee;

}

li {

min-height: 2em;

margin-top: 10px;

background: #abcded;

}

/ 组件过渡类 /

.drog-move {

transition: transform 1s;

}

</style>

<body>

<div id="app">

<transition-group name="drog" tag="ul">

<li draggable="true" v-for="(item, index) in lists" @dragstart="dragStart($event, index)" @dragover="allowDrop" @drop="drop($event, index)" v-bind:key="item">{{item}}</li>

</transition-group>

</div>

</body>

<script src="vue.min.js"></script>

<script>

new Vue({

el: '#app',

data: {

lists: ['1: apple', '2: banana', '3: orange', '4: melon']

},

methods: {

//取消默认行为

allowDrop(e){

e.preventDefault();

},

//开始拖动

dragStart(e, index){

let tar = e.target;

e.dataTransfer.setData('Text', index);

if (tar.tagName.toLowerCase() == 'li') {

// console.log('drag start')

// console.log('drag Index: ' + index)

}

},

//放置

drop(e, index){

this.allowDrop(e);

// console.log('drop index: ' + index);

//使用一个新数组重新排序后赋给原变量

let arr = this.lists.concat([]),

dragIndex = e.dataTransfer.getData('Text');

temp = arr.splice(dragIndex, 1);

arr.splice(index, 0, temp[0]);

// console.log('sort');

this.lists = arr;

}

}

})

</script>

</html>

ps:下面看下vue 拖拽排序的实例代码,具体代码如下所示:

<template>

<section class="main">

<div class="drag-box-left">

<div class="drag-title">拖动排序</div>

<div class="drag-list" draggable="true"

v-for="list in data1"

:data-id="list.id"

@dragstart="dragstartEvent"

@dragend="dragendEvent"

@dragenter="dragenterEvent"

@dragleave="dragleaveEvent"

@dragover="dragoverEvent"

>{{list.title}}</div>

</div>

</section>

</template>

<script>

export default {

data() {

return {

dragElement: null,

lock: true,

data1: [

{id: 1, title: '这里是列表1的标题'},

{id: 2, title: '这里是列表2的标题'},

{id: 3, title: '这里是列表3的标题'},

{id: 4, title: '这里是列表4的标题'},

{id: 5, title: '这里是列表5的标题'},

{id: 6, title: '这里是列表6的标题'},

{id: 7, title: '这里是列表7的标题'}

],

data2: [

{id: 1, title: '这里是列表11的标题'},

{id: 2, title: '这里是列表12的标题'},

{id: 3, title: '这里是列表13的标题'},

{id: 4, title: '这里是列表14的标题'}

]

}

},

methods: {

dragstartEvent(ev) {

const self = this;

self.dragElement = ev.target;

ev.target.style.backgroundColor = '#f8f8f8';

},

dragendEvent(ev) {

ev.target.style.backgroundColor = '#fff';

ev.preventDefault();

},

dragenterEvent(ev) {

const self = this;

if(self.dragElement != ev.target){

ev.target.parentNode.insertBefore(self.dragElement, ev.target);

}

},

dragleaveEvent(ev) {

const self = this;

if(self.dragElement != ev.target){

if(self.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){

ev.target.parentNode.appendChild(self.dragElement);

self.lock = false;

}else{

self.lock = true;

}

}

},

dragoverEvent(ev) {

ev.preventDefault();

}

}

}

</script>

<style scoped>

.drag-box-left{

float: left;

width: 45%;

}

.drag-box-right{

float: right;

width: 45%;

}

.drag-list{

border: 1px solid #ddd;

padding:10px;

margin-bottom: 20px;

transition: border .3s;

}

.drag-list:hover{

border: 1px solid #20a0ff;

}

.drag-title{

font-weight: 400;

line-height: 25px;

margin: 10px 0;

font-size: 22px;

color: #1f2f3d;

}

</style>

总结

以上所述是小编给大家介绍的Vue实现拖放排序功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

以上是 Vue实现拖放排序功能的实例代码 的全部内容, 来源链接: utcz.com/z/358293.html

回到顶部