jQueryのsortableについてうまく動くようにしたいです（内容は平易ですが実装はやや難？）

うまく動くもの。

HTML
1<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
2
3これは「項目」をドラッグ・アンド・ドロップするとソートできます。
4<ul id="jquery-ui-sortable">
5  <li class="ui-state-default">項目 1</li>
6  <li class="ui-state-default">項目 2</li>
7  <li class="ui-state-default">項目 3</li>
8  <li class="ui-state-default">項目 4</li>
9  <li class="ui-state-default">項目 5</li>
10  <li class="ui-state-default">項目 6</li>
11  <li class="ui-state-default">項目 7</li>
12</ul>
13

javascript
1$(function() {
2    $( '#jquery-ui-sortable' ) . sortable();
3    $( '#jquery-ui-sortable' ) . disableSelection();
4});
5
6

うまく動かないもの。

HTML
1<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
2これは「項目」をドラッグ・アンド・ドロップするとソートできます。
3<div>
4</div>
5

javascript
1$(function() {
2  $('#jquery-ui-sortable').sortable();
3  $('#jquery-ui-sortable').disableSelection();
4
5  var html = '';
6
7  html += '<ul id="jquery-ui-sortable">';
8  html += '    <li class="ui-state-default">項目 1</li>';
9  html += '    <li class="ui-state-default">項目 2</li>';
10  html += '    <li class="ui-state-default">項目 3</li>';
11  html += '    <li class="ui-state-default">項目 4</li>';
12  html += '    <li class="ui-state-default">項目 5</li>';
13  html += '    <li class="ui-state-default">項目 6</li>';
14  html += '    <li class="ui-state-default">項目 7</li>';
15  html += '</ul>';
16
17  $('div').html(html);
18
19});
20

うまく動かないものを、うまく動く（ドラッグ・アンド・ドロップで選択肢が移動する）ようにできないでしょうか？
よろしくお願いいたします。

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

回答2件

js
1$(function() {
2  // ここの時点でHTML上に「id="jquery-ui-sortable"」の要素は無い
3  // $('#jquery-ui-sortable').sortable();
4  // $('#jquery-ui-sortable').disableSelection();
5
6  var html = '';
7
8  html += '<ul id="jquery-ui-sortable">';
9  html += '    <li class="ui-state-default">項目 1</li>';
10  html += '    <li class="ui-state-default">項目 2</li>';
11  html += '    <li class="ui-state-default">項目 3</li>';
12  html += '    <li class="ui-state-default">項目 4</li>';
13  html += '    <li class="ui-state-default">項目 5</li>';
14  html += '    <li class="ui-state-default">項目 6</li>';
15  html += '    <li class="ui-state-default">項目 7</li>';
16  html += '</ul>';
17
18  $('div').html(html);
19
20  // ここならある
21  $('#jquery-ui-sortable').sortable();
22  $('#jquery-ui-sortable').disableSelection();
23});

投稿2020/02/11 02:30

kei344

総合スコア69608

kei344

2020/02/11 02:31

既に丁寧な回答が付いていた･･･。

tiqua_nibio

2020/02/11 03:25

同じ回答で有益な情報でありがとうございます。またご協力いただけますと幸いです。

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

ベストアンサー

要素が生成される前にsortable()を設定しても、要素自体がないので設定されません。
要素が生成されてからsortable()を設定するようにしましょう。

js
1$(function() {
2  var html = '';
3
4  html += '<ul id="jquery-ui-sortable">';
5  html += '    <li class="ui-state-default">項目 1</li>';
6  html += '    <li class="ui-state-default">項目 2</li>';
7  html += '    <li class="ui-state-default">項目 3</li>';
8  html += '    <li class="ui-state-default">項目 4</li>';
9  html += '    <li class="ui-state-default">項目 5</li>';
10  html += '    <li class="ui-state-default">項目 6</li>';
11  html += '    <li class="ui-state-default">項目 7</li>';
12  html += '</ul>';
13
14  $('div').html(html);
15
16  $('#jquery-ui-sortable').sortable(); /*後に移動*/
17  $('#jquery-ui-sortable').disableSelection(); /*後に移動*/
18
19});