tusLaravelでsortable使いたい

Laravelのマルチ認証で管理画面を作成して、
管理画面のテーブルの行をWordpressのようにドラッグで並び替えできるようにしたいのですが、
Jqueryのsortableが上手く動いてくれません。

layout1
1<!doctype html>
2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6
7    <!-- CSRF Token -->
8    <meta name="csrf-token" content="{{ csrf_token() }}">
9
10    <title>{{ config('app.name', 'Laravel') }}</title>
11
12    <!-- Scripts -->
13    <script src="{{ asset('js/app.js') }}" defer></script>
14
15    <!-- Fonts -->
16    <link rel="dns-prefetch" href="//fonts.gstatic.com">
17    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
18
19    <!-- Styles -->
20    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
21
22    <!-- sortable -->
23    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
24    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
25    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
26</head>
27<body>
28    <div id="app">
29        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
30            <div class="container">
31                <a class="navbar-brand" href="{{ url('/') }}">
32                    {{ config('app.name', 'Laravel') }}
33                </a>
34                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
35                    <span class="navbar-toggler-icon"></span>
36                </button>
37
38                <div class="collapse navbar-collapse" id="navbarSupportedContent">
39                    <!-- Left Side Of Navbar -->
40                    <ul class="navbar-nav mr-auto">
41
42                    </ul>
43
44                    <!-- Right Side Of Navbar -->
45                    <ul class="navbar-nav ml-auto">
46                        <!-- Authentication Links -->
47                        @guest
48                            <li class="nav-item">
49                                <a class="nav-link" href="{{ route('admin.login') }}">{{ __('Login') }}</a>
50                            </li>
51                            @if (Route::has('register'))
52                                <li class="nav-item">
53                                    <a class="nav-link" href="{{ route('admin.register') }}">{{ __('Register') }}</a>
54                                </li>
55                            @endif
56                        @else
57                            <li class="nav-item dropdown">
58                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
59                                    {{ Auth::user()->name }} <span class="caret"></span>
60                                </a>
61
62                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
63                                    <a class="dropdown-item" href="{{ route('admin.logout') }}"
64                                       onclick="event.preventDefault();
65                                                     document.getElementById('logout-form').submit();">
66                                        {{ __('Logout') }}
67                                    </a>
68
69                                    <form id="logout-form" action="{{ route('admin.logout') }}" method="POST" style="display: none;">
70                                        @csrf
71                                    </form>
72                                </div>
73                            </li>
74                        @endguest
75                    </ul>
76                </div>
77            </div>
78        </nav>
79
80        <main class="py-4">
81            @yield('content')
82        </main>
83    </div>
84
85    <script src="{{ asset('js/main.js') }}"></script>
86
87    @yield('javascript')
88</body>
89</html>
90

layout2
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7    <meta http-equiv="x-ua-compatible" content="ie=edge">
8    <title>@yield('title')</title>
9    <!-- Font Awesome -->
10    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
11    <!-- Bootstrap core CSS -->
12    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
13    <!-- Material Design Bootstrap -->
14    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/css/mdb.min.css" rel="stylesheet">
15    <!-- Your custom styles (optional) -->
16    <link href="{{ asset('css/style.css') }}" rel="stylesheet">
17</head>
18
19<body>
20    @include('nav')
21    <div id="main">
22        <div class="container">
23            <div id="app">
24                @yield('content')
25            </div>
26        </div>
27    </div>
28
29    <script src="{{ mix('js/app.js') }}"></script>
30    <!-- JQuery -->
31    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
32    <!-- Bootstrap tooltips -->
33    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
34    <!-- Bootstrap core JavaScript -->
35    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
36    <!-- MDB core JavaScript -->
37    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/js/mdb.min.js"></script>
38    <!-- Custom JavaScript(original) -->
39    <script src="{{ asset('js/main.js') }}"></script>
40
41    @yield('javascript')
42</body>
43
44</html>

laravel
1@extends('admin.layouts.app')
2
3@section('content')
4<div class="row">
5    @include('admin.sidebar')
6    <div class="col">
7        <div class="card mt-4 mr-4">
8            <table class="table">
9                <thead class="black white-text">
10                    <tr>
11                        <th scope="col">id</th>
12                        <th scope="col">タイトル</th>
13                        <th scope="col">本文</th>
14                        <th scope="col">画像</th>
15                        <th scope="col">日時</th>
16                        <th scope="col"></th>
17                    </tr>
18                </thead>
19                <tbody>
20                    @foreach($posts as $post)
21                        <tr id="sample">
22                            <th scope>{{ $post->id }}</th>
23                            <td>
24                                {{ $post->title }}
25                            </td>
26                            <td>
27                                {{ $post->body }}
28                            </td>
29                            <td>
30                                <img src="data:image/png;base64, {{ $post->file_name }}" style="width:50px; height:30px;">
31                            </td>
32                            <td>
33                                {{ $post->created_at }}
34                            </td>
35                            <td>
36                                <a href="{{ route('posts.show', ['post' => $post]) }}">詳細</a>
37                            </td>
38                        </tr>
39                    @endforeach
40                </tbody>
41            </table>
42        </div>
43    </div>
44</div>
45@endsection
46
47@section('javascript')
48<script>
49$(function() {
50    $('#sample').sortable();
51});
52</script>
53@endsection
54コード

行動規範の内容に同意します

回答2件

ベストアンサー

html
1                    @foreach($posts as $post)
2                        <tr id="sample">
3                            <th scope>{{ $post->id }}</th>
4                            <td>
5                                {{ $post->title }}
6                            </td>
7                            <td>
8                                {{ $post->body }}
9                            </td>
10                            <td>
11                                <img src="data:image/png;base64, {{ $post->file_name }}" style="width:50px; height:30px;">
12                            </td>
13                            <td>
14                                {{ $post->created_at }}
15                            </td>
16                            <td>
17                                <a href="{{ route('posts.show', ['post' => $post]) }}">詳細</a>
18                            </td>
19                        </tr>
20                    @endforeach

こんな書き方したら、 id="sample" が複数生成されて、id はドキュメント内でユニーク でなければならないという大原則を破ってしまいますよ。

投稿2020/08/24 08:15

phper.k

総合スコア3923

courage23

2020/08/24 08:20

そうなんですね。。jqueryやjavascriptは初めてで。。 <tr>タグに付与することはできないですか？

phper.k

2020/08/24 08:22 編集

> jqueryやjavascriptは初めてで。。いや、単純にこの指摘はHTMLの話ですよ。ただ、Javascript もあくまで、正しいHTMLがあって初めて正しく動くものなので、HTMLを漫然と書いてはいけません。

courage23

2020/08/24 08:23

そうですね。。すみません勘違いでした。

phper.k

2020/08/24 08:25 編集

自分なら、table タグに id つけて、 $('#sample tbody tr').sortable(); のように使うでしょうね

courage23

2020/08/24 08:26

ご指摘ありがとうございます。ただ、javascriptは動くのですが、上手くjqueryのsortableが導入できていないようです。

phper.k

2020/08/24 08:28

courage23

2020/08/24 08:30

はいそれは分かります！

phper.k

2020/08/24 08:32

じゃあ、開発ツールの Network タブでそれを確認すれば良いということはご存知？

courage23

2020/08/24 08:37

読み込まれていないエラーが出ているようには認識してないのですが、、、

phper.k

2020/08/24 08:40 編集

正しく読み込まれていると断言できるのであれば、その前提で進めますが、その認識が間違っている場合は解決が遠のきますよ。

courage23

2020/08/24 08:41

読み込まれていないというのは、エラーが出るのではなかったですか？ chromeだと検証でconsoleを確認するので合ってないですか？

phper.k

2020/08/24 08:43 編集

あなたが見ているものをあなたの言葉通り解釈するしかありませんから、どういう状態のことを正しいと認識しているのか私には判断できませんお互い見ているものが同一なのか判断できませんから、エビデンス出してくれ

phper.k

2020/08/24 08:45

このサイトの質問者の多くに、エラーではないものをエラーと言っていたり、エラーを正常と言ったりする人多いから、質問者の情報ってほとんど信用していないです。スクショでも貼ってくれ

courage23

2020/08/24 08:50

添付したエラーの画像(chromeのconsole)に <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> が読み込まれていないというエラーが自分のわかる範囲では認識できないです。なので読み込まれているとまでは言えませんが、それ以外での確認の仕方が現状分からないです。

phper.k

2020/08/24 08:51

ネットワークタブで確認してください

courage23

2020/08/24 09:00

ネットワークタブで見れるのですね。知りませんでしたありがとうございます。画像を追加で添付しました。読み込まれていました。

phper.k

2020/08/24 09:02

読み込まれていることは間違い無いようなので、他に考えられるのは、他のスクリプトとの競合でしょう。 main.js や app.js を一旦外してみたりすれば、動く可能性は高い

courage23

2020/08/24 09:13

main.jsとapp.jsを外してみましたが、ダメでした。ただ、管理画面のbaseのテンプレートとは別にもう一つ用意しているので競合しているかもしれないです。ユーザー側のbaseのテンプレートも追加しました。

phper.k

2020/08/24 09:14

> main.jsとapp.jsを外してみましたが、ダメでした。エビデンスがないとどうダメだったのかわからん。

phper.k

2020/08/24 09:15

ダメとはどうなっているからダメと判断した？コンソールのエラーはどう変化した？

courage23

2020/08/24 09:15

管理画面側のレイアウトのこちらの記述を消してみました。  <script src="{{ asset('js/app.js') }}" defer></script> <script src="{{ asset('js/main.js') }}"></script>

phper.k

2020/08/24 09:21 編集

っで、その結果どうなったの？

courage23

2020/08/24 09:21

説明不足ですみません。上記の記述でコンソールのエラーは何も出なくなりました。ただ、$('#sample tbody tr').sortable();と記述してみても入れ替えはできていないです。

phper.k

2020/08/24 09:23

HTMLをいう通りに書き換えれば動くはず。

courage23

2020/08/24 09:27

idの名前のスペルミスで、直したところちゃんと動くようになりました。調べ方まで教えていただきありがとうございました。とても勉強になりました。長い間お付き合いいただいて本当にありがとうございます。

phper.k

2020/08/24 09:30

プログラム作業のほとんどはデバッグなので、そのやり方さえ身につけばなんてことないんですけどね。

行動規範の内容に同意します

Laravelでsortable使いたい

まずLaravel度外視で静的HTMLで組んでみるところからではないでしょうか。
結局はLaravelもPHPとして出力を行っているだけなので、Laravelかどうかは基本的に関係なく実装可能なはずです。
※もちろん利用しようとしているライブラリ・プラグインに当該機能がある前提です。

投稿2020/08/24 08:12

m.ts10806

総合スコア80875

courage23

2020/08/24 08:14

jsfiddleでは下記の記述で動いたのですが、制作しているlaravelでは上手く動いてくれません。。  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" /> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <ul id="sample"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> </ul> <script> $(function() { $('#sample').sortable(); });

m.ts10806

2020/08/24 08:17

CDNもhttps含めてフルにしてみてはどうでしょう。他にも見直す点は多そうですが。

courage23

2020/08/24 08:22

それでもまだ変わらないです。。。

行動規範の内容に同意します

あなたの回答