今天給大家分享一個功能超強的自由拖拽排序組件VueSlicksort。

vue-slicksort?一款功能強大的可拖拽的vue.js組件。擁有絲滑般拖拽動畫效果，支持水平/垂直/網格拖拽排序。還可以自動滾動、鎖定坐標系，并支持觸摸。

代碼片段

"true"
:pressDelay="300"
v-model="appitems"
helperClass="helperClass"class="ul"
axis="xy"
>for="(item,index) in appitems" :index="index" :key="index" class="li">class="{'add-border':isEditMenus}" class="app-border" @click="toApp(item)">"item.menuIcon" class="app-icon">

{{ item.menuName }}

if="isEditMenus" src="@/assets/del.png" class="del" @click.stop="delApp(item,index)">
class="notice">以上應用展示在首頁

安裝

$ npm i vue-slicksort -S

插件使用

<template>
<div class="slicksort-wrap">

<SlickList
:lockToContainerEdges="true"
lockAxis="y"
v-model="items"
@input="getChangeLists"
>
<SlickItem v-for="(item, index) in items" :index="index" :key="index">
{{ item }}
SlickItem>
SlickList>
div>
template>

<script>
import { SlickList, SlickItem } from "vue-slicksort";
export default {
components: {
SlickItem,
SlickList
},
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8']
};
},
methods: {
getChangeLists(vals) {
// 拖拽完成后返回被打亂后的順序
console.log(vals);
}
}
};
script>

組件參數

組件事件

提供各種演示示例，讓拖拽排序變得如此簡單。

貼上示例地址及倉庫地址

# 預覽地址
https://jexordexan.github.io/vue-slicksort/

# github地址
https://github.com/Jexordexan/vue-slicksort

好了，就分享到這里。感興趣的小伙伴可以去嘗試下哈。

來源：

https://www.toutiao.com/i6842622910692065803/

“IT大咖說”歡迎廣大技術人員投稿，投稿郵箱：aliang@itdks.com

來都來了，走啥走，留個言唄~

?IT大咖說 ?|??關于版權?

由“IT大咖說(ID：itdakashuo)”原創的文章，轉載時請注明作者、出處及微信公眾號。投稿、約稿、轉載請加微信：ITDKS10(備注：投稿)，茉莉小姐姐會及時與您聯系！

感謝您對IT大咖說的熱心支持！

相關推薦

推薦文章

• 利用YOLOV3檢測算法來實現人物定位與距離計算，打造全球定位系統

• Docker命令行參數和Dockerfile指令「收藏版」

• 為什么選擇javafx？

• 分分鐘學會前端sku算法(商品多規格選擇)

• 可算是有文章，把Linux零拷貝技術講透徹了

• 人工智能大逆轉，高薪工作反而被淘汰！誰才是未來“最沒用的人”

總結

以上是生活随笔為你收集整理的vue可视化拖拽组件模板_基于 Vue 丝滑般拖拽排序组件VueSlicksort的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。