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

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

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

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

jQuery

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

Q&A

解決済

1回答

575閲覧

jQueryUIのsortableを利用した入れ替え可能リストの順番をすぐに条件分岐に使いたい

komado214

総合スコア8

jQuery UI

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

jQuery

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

0グッド

0クリップ

投稿2017/08/26 00:06

###前提・実現したいこと
jQueryUIのsortable()を利用して入れ替え可能なリストを作成(ゲーム制作に使うための雛形)しています。
入れ替えが完了したタイミングでidの配列を作り、指定の順番「21345」になっていればコンソールに「正解」のメッセージを出したいです。
ですが入れ替え直後は配列が「12undefined345」「125undefined34」というようになってしまい、うまく分岐させることができませんでした。

初歩的なことかもしれませんがよろしくお願いします。

###該当のソースコード

<body> <ul id="jquery-ui-sortable"> <li class="ui-state-default" id="1">項目名 A</li> <li class="ui-state-default" id="2">項目名 B</li> <li class="ui-state-default" id="3">項目名 C</li> <li class="ui-state-default" id="4">項目名 D</li> <li class="ui-state-default" id="5">項目名 E</li> </ul>
<script src="tyrano/libs/jquery-3.2.1.min.js"></script> <script src="tyrano/libs/jquery-ui.min.js"></script> <script> jQuery('#jquery-ui-sortable').sortable(); $('#jquery-ui-sortable').mouseup(function() { var IDs = ''; $('#jquery-ui-sortable li').map(function() { IDs += $(this).attr("id"); }); console.log(IDs); if (IDs == '21345') { console.log('正解'); } }); </script>
</body>

###試したこと
・if分岐の条件にindexOfを使って「〜を含む」という分岐条件→目的以外の条件でもtrueになってしまう
・$(function(){});で囲むことで実行タイミングをずらす→成果なし
###補足情報(言語/FW/ツール等のバージョンなど)
jQuery 3.2.1

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

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

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

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

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

guest

回答1

0

ベストアンサー

jQuery UISortableウィジェットに用意されているupdateイベントを使ったほうが楽に実装できると思いますが、いかがでしょうか?

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 </style> 12</head> 13<body> 14<ul id="jquery-ui-sortable"> 15 <li class="ui-state-default" id="1">項目名 A</li> 16 <li class="ui-state-default" id="2">項目名 B</li> 17 <li class="ui-state-default" id="3">項目名 C</li> 18 <li class="ui-state-default" id="4">項目名 D</li> 19 <li class="ui-state-default" id="5">項目名 E</li> 20</ul> 21<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 22<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 23<script> 24 $("#jquery-ui-sortable").sortable({ 25 update: function (e, u) { 26 var IDs = ""; 27 $("#jquery-ui-sortable").children("li").map(function () { 28 IDs += $(this).attr("id"); 29 }); 30 console.log(IDs); 31 32 if (IDs === "21345") { 33 console.log('正解'); 34 } 35 } 36 }); 37</script> 38</body> 39</html>

投稿2017/08/26 00:26

編集2017/08/26 00:27
s8_chu

総合スコア14731

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

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

komado214

2017/08/26 00:37

ありがとうございました。うまくいきそうです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問