jucai/public/themes/default/views/app/recruit/post_select.blade.php

@extends('module.layouts.content')

@push('meta')

@endpush

@push('css')
    <style >
        .container {
            width: 1000px;
            margin: 20px auto;
        }
    </style>
@endpush

@push('js')
    <link href="{{ theme_asset('app/css/common.css') }}" rel="stylesheet">
    <link href="{{theme_asset('app/css/recruit/recruit.css')}}" rel="stylesheet" type="text/css"/>


@endpush

@section('content')
    <div id="app">
        <div class="container">
            <h2>晋江市公开招聘第十三批村务（社区）专职工作者</h2>
            <draggable  :list="list" :disabled="!enabled" class="list-group" ghost-class="ghost"
                        :move="checkMove" @start="dragging = true" @end="dragging = false">
                <div class="list-group-item" v-for="element in list" :key="element.name" v-text="element.name">

                </div>
            </draggable>
        </div>
    </div>

@endsection

@section('script')
    <script src="{{theme_asset('app/js/vue.min.js')}}"></script>
    <script src="{{theme_asset('app/js/axios.js')}}"></script>
    <script src="{{theme_asset('app/js/Sortable.min.js')}}"></script>
    <script src="{{theme_asset('app/js/vuedraggable.umd.min.js')}}"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                enabled: true,
                list: [
                    { name: "1 - John", id: 0 },
                    { name: "2 - Joao", id: 1 },
                    { name: "3 - Jean", id: 2 }
                ],
                dragging: false
            },
            methods: {
                checkMove: function(e) {
                    window.console.log("Future index: " + e.draggedContext.futureIndex);
                }
            }
        })
    </script>
@endsection