jQuery UI を利用したテーブル行のドラッグ＆ドロップによる入れ替え

前提・実現したいこと

https://webllica.com/jquery-ui-table-data-drag-and-drop/

表題の件について、上記URLの内容をとりあえずそのまま試作しているですが、
動作しません。

Google の CDNを利用していますが、
まずjquery-ui.cssが上手く読み込めていないようです。

ご教示の程よろしくお願いいたします。

発生している問題・エラーメッセージ

なし

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3    <head>
4        <title>スケジュール</title>
5        <meta charset="UTF-8">
6        <meta name="viewport" content="width=device-width, initial-scale=1.0">
7                
8        <!-- jQuery -->
9        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
10        <!-- jQuery UI -->
11        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
12        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
13        
14        
15        <script>
16            $('#sortdata').sortable();
17            alert("a");
18        </script>
19        
20        
21    </head>
22    <body>
23        <div>Javascriptテスト</div>
24        
25        <table>
26            <thead>
27              <tr>
28                <th>No.</th>
29                <th>タイトル</th>
30                <th>発売日</th>
31              </tr>
32            </thead>
33            <!--tbodyにID属性を指定します-->
34            <tbody id="sortdata">
35              <tr>
36                <th>1</th>
37                <td>スプラトゥーン２</td>
38                <td>2017年7月21日</td>
39              </tr>
40              <tr>
41                <th>2</th>
42                <td>スーパーマリオ・オデッセイ</td>
43                <td>2017年10月27日</td>
44              </tr>
45              <tr>
46                <th>3</th>
47                <td>アームズ</td>
48                <td>2017年6月16日</td>
49              </tr>
50              <tr>
51                <th>4</th>
52                <td>1-2-Switch</td>
53                <td>2017年3月3日</td>
54              </tr>
55              <tr>
56                <th>5</th>
57                <td>モンスターハンター XX</td>
58                <td>2017年8月25日</td>
59              </tr>
60            </tbody>
61            </table>
62        
63    </body>
64</html>
65

試したこと

Microsoft の CDN やjQueryのCDNに変更。（ダメでした。）

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

ベストアンサー

sortableがhtmlの描画前に実行されているのが原因です

</body>の直前に移動する,または下記のようにページ読み込み完了後に実行してください

Javascript
1  $(function(){ $('#sortdata').sortable(); });

投稿2019/08/22 02:15

yxt003

総合スコア184

FSI

2019/08/22 02:52

ありがとうございます！すごく初歩的な考え方の部分で、お手数をお掛けしました。ついでながら「../themes/smoothness/jquery-ui.css"」のcssが効かないのはなぜでしょうか。何度もすみません。

yxt003

2019/08/22 03:37

jquery-ui.cssはきちんと読み込めてると思いますよ。参考サイトとテーブルのデザインが違うのは参考サイトではテーブル用のcssを独自で用意しているためです

FSI

2019/08/22 04:01

そうだったんですね。承知しました。ありがとうございました!

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

jquery-ui.cssなら

https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css

HTML
1<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
2

を利用してみてはどうでしょうか？

投稿2019/08/22 03:26

yambejp

総合スコア114968

FSI

2019/08/22 04:51

GoogleのCDNよりも、やはりjQueryのCDNの方がいいのでしょうか。できればintegrity が実装されているjQueryのCDNを利用したいのですが、まだintegrity の実装方法などよくわかりません。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！