リストをドラッグアンドドロップで並び替えをしたら、更新ボタンのdisabledを外したいです。

前提条件・したいこと

並び替えには、Sortableというjquery uiプラグインを使っています。
ページが読み込まれて、ドラッグアンドドロップで並び替えする前は、更新ボタンがdisabledになります。
ドラッグアンドドロップで並び替えをすると、更新ボタンがenabledになります。

問題点

ドラッグアンドドロップで並び替えをしても、更新ボタンのdisabledが解除されません。

ソース

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
8    <script
9      type="text/javascript"
10      src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
11    ></script>
12    <script
13      type="text/javascript"
14      src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
15    ></script>
16    <title>Sortable</title>
17  </head>
18
19  <body>
20    <ol id="index-list">
21      <li>
22        <details>
23          <summary
24            class="summary"
25            data-id="66"
26            data-title="1"
27            data-page="66"
28            data-fid="0"
29            data-nest="0"
30          >
31            id:66/1巻/0章/0節/nested:0
32          </summary>
33        </details>
34      </li>
35      <li>
36        <details>
37          <summary
38            class="summary"
39            data-id="67"
40            data-title="2"
41            data-page="67"
42            data-fid="0"
43            data-nest="0"
44          >
45            id:67/2巻/0章/0節/nested:0
46          </summary>
47        </details>
48      </li>
49      <li>
50        <details>
51          <summary
52            class="summary"
53            data-id="76"
54            data-title="300"
55            data-page="76"
56            data-fid="0"
57            data-nest="0"
58          >
59            id:76/3巻/0章/0節/nested:0
60          </summary>
61        </details>
62      </li>
63    </ol>
64    <button id="submit" disabled>更新</button>
65  </body>
66  <script>
67    $("#index-list").on("change", function () {
68      console.log("changed");
69      $("#submit").prop("disabled", false);
70    });
71    $("#index-list").sortable({
72      cancel: ".stop",
73    });
74
75  </script>
76</html>

試してみたこと

ドラッグアンドドロップでリストが並び替えられるときに変化すると思い、下記ソースのように、onのchangeメソッドを使いました。

　　ですが、ドラッグアンドドロップをしても、更新ボタンのdisabledが解除されず、使用可能にはならなかったです。

jquery
1    $("#index-list").on("change", function () {
2      console.log("changed");
3      $("#submit").prop("disabled", false);
4    });

最後に

皆様方のお力をお借りできればと思います。お手数ですが、宜しくお願い致します。

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

回答2件

ベストアンサー

sortableの中で処理します。
changeは完了しなくても発行されるのでstopがよいでしょう

javascript
1$(function(){
2  $("#index-list").sortable({
3  stop:function(){
4    $("#submit").prop("disabled", false);
5  }
6  });
7});

投稿2021/10/19 00:59

yambejp

総合スコア116724

ドキュメントを読みましょう。

ドキュメント中のコード例は .on("change") を使ってないですよね。

投稿2021/10/19 00:51

int32_t

総合スコア21695

unwind

2021/10/19 01:02

int32_t様コメント頂きありがとうございます。ドキュメントを見て、下記のコードのようにしたら無事更新ボタンのdisabledを外すことが出来ました。お手数かけていただき、ありがとうございます。 ```javascript $("#index-list").sortable({ cancel: ".stop", change: function(event, ui){ $("#submit").prop("disabled", false); } }); ```

yambejp

2021/10/19 01:03

回答つけてありますがchangeではない気がします

unwind

2021/10/19 01:15

yambejp様コメントとソースを頂きありがとうございます。 changeだと、ドラッグアンドドロップの移動の最中で更新ボタンのdisabledが外れますね。 stopですと、ドラッグアンドドロップの移動が終わったら更新ボタンのdisabledが外れるようになります。ドラッグアンドドロップの移動の終わりに、更新ボタンのdisabledを外したいため、stopの方がいいですね。お手数かけていただき、ありがとうございます。

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

あなたの回答