[前端] 拖曳: Sortable.js

日期：
Sortable.js
https://github.com/SortableJS/Sortable

拖放排序外掛程式Sortable.js
https://segmentfault.com/a/1190000008209715

Sortable.js是一款羽量級的拖放排序列表的js外掛程式，其支援觸屏設備和大部分流覽器，可以從一個列表容器中拖拽一個清單單元到其他容器，或於本列表容器中進行排序。此外，Sortable.js支持多種框架(angular、vue、react等)，支持所有的css框架，像Bootstrap，具備簡單的API方便使用，且不依賴jQuery。

以下為vue版組件︰

Vue.Draggable
https://github.com/SortableJS/Vue.Draggable

學習筆記《Vue Draggable》
https://www.jianshu.com/p/fb3a51858b4a

Vue Draggable 是一個實現拖拽功能的 Vue 元件，實現是基於 Sortable.js 拖拽套件，功能十分穩健，相關設定可直接看 Sortable.js 的說明文件。


以下為單html檔測試範例︰
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Sortable.js與Vue.Draggable Demo</title>

    <!--使用vue-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.9/vue.min.js"></script>

    <!--使用sortable.js-->
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>

    <!--使用vuedraggable-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.19.2/vuedraggable.umd.min.js"></script>

    <style>

        .flip-list {
            transition: all 0.5s ease;
            margin: 5px;
            padding: 10px;
            width: 200px;
            cursor: pointer;
            border: 1px solid #aaa;
            font-family: Arial;
        }

    </style>

</head>
<body>

    <div id="app">

        <draggable v-model="list">
            <transition-group>
                <div class="flip-list"
                     v-bind:key="ele.order"
                     v-for="ele in list"
                >
                    {{ele.name}}
                </div>
            </transition-group>
        </draggable>

    </div>

    <script>
        
        //掛載vuedraggable
        Vue.component('draggable', vuedraggable)

        //vlist
        let vmessage = [
            'vue.draggable',
            'draggable',
            'component',
            'for',
            'vue.js 2.0',
            'based',
            'on',
            'Sortablejs'
        ]
        let vlist = vmessage.map((name, index) => {
            return { name, order: index }
        })

        new Vue({
            el: '#app',
            data() {
                return {
                    list: vlist
                }
            },
            methods: {
            },
            computed: {
            }
        })

    </script>

</body>
</html>


載入後畫面為︰



#Javascript, Vue, draggable, sortable, 拖曳, 組件

留言

張貼留言