|
@@ -0,0 +1,62 @@
|
|
|
|
+@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
|