Vue中实现拖放排序

2024年5月17日 200次阅读 来源: 折耳的猫

啥也不说，贴上代码：

<!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>

    原文作者：折耳的猫
    原文地址: https://segmentfault.com/a/1190000019693096
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞