使用Vue.Draggable和laravel实现拖动改变顺序

项目演示

drag.gif

准备工作

1. 新建laravel项目

laravel new drag
composer install
npm install 

2.安装Vue.Draggabel

npm install vuedraggable 

数据准备

• 建立series

php artisan make:model Series -m  -c -r

-m:生成migration文件
-c生成controller
-r 生成个resource controller

migration文件

Schema::create('series', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->timestamps();
        });

• 建立parts

php artisan make:model Parts -m 

migration文件

 Schema::create('parts', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('series_id')->unsigned();
            $table->string('title');
            $table->integer('sort_order');
            $table->timestamps();
        });

Series.php建立关系

public function parts()
    {
        return $this->hasMany(Part::class)->orderBy('sort_order','asc');
    }

使用Seeder填充数据

php artisan make:seeder SeriesTableSeeder
php artisan make:seeder PartsTableSeeder

SeriesTableSeeder.php

 $faker = Faker::create();
 Series::create([
     'title'=>$faker->text(10)
 ]);

PartsTableSeeder.php

$faker = Faker::create();
        for($i=1;$i<5;$i++){
            \App\Part::create([
                'title'=>'Task'.$i,
                'series_id'=>1,
                'sort_order'=>$i
            ]);
        }

使用编写前台代码并且使用Vue.Draggable

<div class="panel panel-default">
                    <div class="panel-heading">Editing <em>{{title}}</em></div>
                    
                    <div class="panel-body">
                        <div class="alert alert-success" v-if="message">
                            {{message}}
                        </div>
                        <form action="#" @submit.prevent="submit">
                            <div class="form-group" v-bind:class="{'has-error':errors.title}">
                                <label for="title" class="control-label">Title</label>
                                <input type="text" name="title" id="title" class="form-control" v-model="title" >
                                <div class="help-block" v-if="errors.title">
                                    {{errors.title[0]}}
                                </div>
                            </div>
                            <draggable :list="parts" :options="{'handle':'.panel-heading'}" @start="drag=true" @end="drag=false " @change="update">
                            <div class="panel panel-default" v-for="part,index in parts">
                                <div class="panel-heading">Part {{index + 1}}({{part.sort_order}})</div>
                                <div class="panel-body">
                                    <div class="form-group" v-bind:class="{'has-error':errors['parts.'+index+'.title']}">
                                        <label>Part Title</label>
                                        <input type="text" name="" id="" class="form-control" v-model="part.title">
                                        <div class="help-block" v-if="errors['parts.'+index+'.title']">
                                            {{errors['parts.'+index+'.title'][0]}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </draggable>
                            <div class="form-group">
                                <button type="submit" class="btn btn-primary">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
<script>
    import draggable from 'vuedraggable';
    export default {
        components:{
            draggable
        },
        data(){
            return {
                title: null,
                parts: [],
                errors:[],
                message:null
            }
        },
        props: [
            'data'
        ],
        mounted() {
            this.title = this.data.title;
            this.parts = this.data.parts;
        },
        methods:{
            update(e){
                this.parts.map((part,index)=>{
                    part.sort_order = index + 1
                })
            },
            submit(){
                axios.patch('/series/'+this.data.id,{
                    title:this.title,
                    parts:this.parts
                }).then((response)=>{
                    this.message="Series saved!"
                }).catch((error)=>{
                    this.errors=error.response.data
                })
            }
        }
    }
</script>

后端代码编写

1.路由文件web.php

Route::get('/series/{series}/edit','SeriesController@edit');
Route::patch('/series/{series}','SeriesController@update');

2.生成数据验证

php artisan make:request UpdateSeriesFormRequest

 public function rules()
    {
        return [
            'title' => 'required',
            'parts.*.title' => 'required'
        ];
    }
    public function messages()
    {
        return [
            'title.required' => 'You must enter a series title',
            'parts.*.title.required'=> 'You need to give this part a title'
        ];
    }

3.创建队列任务

php artisan queue:table
php artisan queue:failed-table
php artisan make:job UpdateSeriesParts

 public function __construct(Series $series,$parts)
    {
        //
        $this->series = $series;
        $this->parts = $parts;
    }
public function handle()
    {
        $this->series->parts->each(function ($part,$index) {
            $part->update(array_only($this->parts[$index],['title','sort_order']));
        });
    }

开启队列监听

php artisan queue:listen 

4.Controller文件

public function edit(Series $series)
    {
        $series->load('parts');
        return view('series.edit',compact('series'));
    }
public function update(UpdateSeriesFormRequest $request, Series $series)
    {
        
        $series->title=$request->title;
        $series->save();
        dispatch(new UpdateSeriesParts($series,$request->parts));
        return response(null,200);
    }

这是codecourse上的Demo,使用了Vue作为前端,Vue.draggable实现拖动,axios发送请求(laravel5.4现在默认就是axios)后端使用Laravel，包括数据填充,数据验证,建立模型,队列等效知识点，希望有助于大家今后用laravel和vue做开发