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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

ドラッグ&ドロップ

コンピューターのGUIにおいて、バーチャルなものを「つかむ」ことによって選択し、別の場所や他のバーチャルなものの上に動かす行為、またはその行為に対応していることを指す。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

3920閲覧

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

tiqua_nibio

総合スコア62

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

ドラッグ&ドロップ

コンピューターのGUIにおいて、バーチャルなものを「つかむ」ことによって選択し、別の場所や他のバーチャルなものの上に動かす行為、またはその行為に対応していることを指す。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/02/11 01:54

うまく動くもの。

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2020/02/11 02:31

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

2020/02/11 03:25

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

0

ベストアンサー

要素が生成される前に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});

投稿2020/02/11 02:25

編集2020/02/11 02:26
hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tiqua_nibio

2020/02/11 03:25

ありがとうございます。大変良いヒントとなりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問