Vue+SortableJS实现拖拽排序及置顶
sortable --- GitHub地址
sortable---Examples地址git
- 安装
npm install sortablejs --save-dev
- 使用
<template>
<ul class="list" id="list">
<li v-for="(item,index) in items">
<p>
<b>{{item.nm}}</b>
<em>{{item.enm}}</em>
</p>
<div class="btns">
<button class="btn_no" @click="btnUp(index)">
<i class="sprites_all sprites_up"></i>
</button>
</div>
<div class="btns btn_move">
<button class="btn_no" @touchend="btnDown(index)">
<i class="sprites_all sprites_draw"></i>
</button>
</div>
</li>
</ul>
</template>
<script>
import Sortable from 'sortablejs'
export default {
data() {
return {
uwasc:true,
idx:'1',
items: [{
id:1,
nm: '澳元日元',
enm: 'AUDJPY(2.6)',
price: 20.545,
up: '-255%',
sel: false
}, {
id:2,
nm: '澳元日元1',
enm: 'AUDJPY(2.6)',
price: 20.545,
up: '+255%',
sel: true
}, {
id:3,
nm: '澳元日元2',
enm: 'AUDJPY(2.6)',
price: 20.545,
up: '+255%',
sel: true
}, {
id:4,
nm: '澳元日元3',
enm: 'AUDJPY(2.6)',
price: 20.545,
up: '+255%',
sel: true
}, {
id:5,
nm: '澳元日元4',
enm: 'AUDJPY(2.6)',
price: 20.545,
up: '+255%',
sel: true
}, {
id:6,
nm: '澳元日元5',
enm: 'AUDJPY(2.6)',
price: 20.545,
up: '+255%',
sel: true
}, {
id:7,
nm: '澳元日元5',
enm: 'AUDJPY(2.6)',
price: 20.545,
up: '+255%',
sel: true
}, {
id:8,
nm: '澳元日元5',
enm: 'AUDJPY(2.6)',
price: 20.545,
up: '+255%',
sel: true
}, {
id:9,
nm: '澳元日元5',
enm: 'AUDJPY(2.6)',
price: 20.545,
up: '+255%',
sel: true
}],
}
},
mounted () {
var $ul = this.$el.querySelector('#list')
new Sortable($ul, {
handle: '.btn_move',
animation: 150
});
},
methods:{
btnUp(index){
var item = this.items[index];
this.items.splice(index,1);
this.items.unshift(item);
},
}
}
</script>
- 问题
拖拽后，数据的顺序没有修改
<template>
<ul class="list" id="list" ref="list">
<li v-for="(item,index) in items" :name="item.Sort">
<p>
<b>{{item.nm}}</b>
<em>{{item.enm}}</em>
</p>
<div class="btns">
<button class="btn_no" @click="btnUp(index)">
<i class="sprites_all sprites_up"></i>
</button>
</div>
<div class="btns btn_move">
<button class="btn_no" @touchend="btnDown(index)">
<i class="sprites_all sprites_draw"></i>
</button>
</div>
</li>
</ul>
</template>
<script>
import Sortable from 'sortablejs'
export default {
data() {
return {
uwasc:true,
idx:'1',
items: [{
id:1,
nm: '澳元日元',
enm: 'AUDJPY(2.6)',
price: 20.545,
up: '-255%',
sel: false,
Sort:0
}, {
id:2,
nm: '澳元日元1',
enm: 'AUDJPY(2.6)',
price: 20.545,
up: '+255%',
sel: true,
Sort:1
}, {
id:3,
nm: '澳元日元2',
enm: 'AUDJPY(2.6)',
price: 20.545,
up: '+255%',
sel: true,
Sort:2
}, {
id:4,
nm: '澳元日元3',
enm: 'AUDJPY(2.6)',
price: 20.545,
up: '+255%',
sel: true,
Sort:3
}, {
id:5,
nm: '澳元日元4',
enm: 'AUDJPY(2.6)',
price: 20.545,
up: '+255%',
sel: true,
Sort:4
}, {
id:6,
nm: '澳元日元5',
enm: 'AUDJPY(2.6)',
price: 20.545,
up: '+255%',
sel: true,
Sort:5
}, {
id:7,
nm: '澳元日元5',
enm: 'AUDJPY(2.6)',
price: 20.545,
up: '+255%',
sel: true,
Sort:6
}, {
id:8,
nm: '澳元日元5',
enm: 'AUDJPY(2.6)',
price: 20.545,
up: '+255%',
sel: true,
Sort:7
}, {
id:9,
nm: '澳元日元5',
enm: 'AUDJPY(2.6)',
price: 20.545,
up: '+255%',
sel: true,
Sort:8
}],
}
},
mounted () {
var $ul = this.$el.querySelector('#list')
new Sortable($ul, {
handle: '.btn_move',
animation: 150
});
},
methods:{
btnUp(index){
var item = this.items[index];
this.items.splice(index,1);
this.items.unshift(item);
},
btnDown(index){
let _this = this;
let list = this.$refs.list;
let liArr = list.getElementsByTagName('li');
let sortList = [];
let allItem = this.items;
this.items=[];
for(let i=0;i<liArr.length;i++){
allItem.forEach((item)=>{
if(item.Sort==liArr[i].getAttribute('name')){
sortList.push(item);
}
})
if(i==liArr.length-1){
setTimeout(()=>{
this.items = sortList;
console.log(this.items)
})
}
}
},
}
}
</script>