Vue实现拖放排序功能的实例代码       本文通过实例代码给大家介绍了Vue中实现拖放排序功能，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
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

凡科抠图：下面看下vue 拖拽排序的实例代码，具体代码如下所示：

 template 
 section 
 div 
 div 拖动排序 /div 
 div 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实现拖放排序功能的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！