先看需求： 我們要實作的是長按右邊按鈕拖拽排序 而不是選中這條資料就可以拖拽，因此vuedraggable 組件在這里是不合適的
1.首先需要用到一個SortableJS
官網： http://www.sortablejs.com/index.html
這里我們直接下載就可以了
npm install sortablejs --save2. 然后在官網的案例中有個 handle的案例 是點中哪一條資料里的按鈕才可以實作拖拽
這樣子點中前面的圖示才可以拖拽
我們就用這個吧
3.引入 組件
<script>
import Sortable from "sortablejs";
export default {
data(){
return{
}
</script>
4.在遍歷的資料上使用
<div class="list_item"
v-for="(item, index) in bingList"
:key="index"
>
<div class="remove">
<van-icon
@click="removeFn()"
class="remove_icon"
name="delete-o"
size="30"
color="#eb5757"
/>
</div>
<div class="name">
<div>{{ item.name }}</div>
<div>包含{{ item.num }}人</div>
</div>
<div class="sort">
<-- !這里是排序的圖示 -->
<van-icon name="wap-nav" size="30" color="#a0a6b1" />
</div>
</div>
</div>5.然后我們在mounted里使用這個方法
mounted() {
//這里是獲取到陣列的元素
var el = document.getElementById("list_item");
new Sortable(el, {
handle: ".sort", // handle's class
animation: 150,
onEnd:(evt)=>{
//拖拽動作結束后執行
this.bingList.splice(evt.newIndex, 0, this.bingList.splice(evt.oldIndex, 1)[0])
var newArray = this.bingList.slice(0)
this.bingList = []
this.$nextTick(function () {
this.bingList = newArray
console.log(this.bingList);
})
}
});
},弄好之后 拖拽可能會超出螢屏 css里加入 overflow: hidden;就好了
備注：具體的配置項還要看官方檔案 就不一一解釋了
點個贊吧
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/384290.html
標籤：其他
上一篇：WatchOS應用程式Xamarin在iPhone上從Watch應用程式安裝應用程式時出現問題
下一篇：Vue開發 常用方法總結