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

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

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

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

Q&A

解決済

2回答

1114閲覧

すべてドロップされたときに、新しいページにとばせるにはどうすれば...

3333

総合スコア10

HTML5

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

0グッド

0クリップ

投稿2016/02/02 20:48

それぞれ「ここへ」に「1」「2」をドラッグすると「あたり」にな
るようにしました

順番は関係なく二箇所の「ここへ」がすべて「あたり」になったときに
新しいページにとぶようにしたいです
どうかけばいいでしょうか...

以下htmlです

<html lang="en"> <head> <meta charset="utf-8"> <title>question</title> <script src="jquery-1.12.0.js"></script> <script src="jquery-ui-1.11.4.custom/jquery-ui.js"></script> <script>

$(function() {
$( "#atari1" ).draggable()
$( "#droppable" ).droppable({
accept:"#atari1",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "h1" )
.html('あたり');
}
});

$( "#atari2" ).draggable() $( "#droppable2" ).droppable({ accept:"#atari2", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "h1" ) .html('あたり'); } }); $( "#hazure3" ).draggable()

});
</script>

</head> <body> <div id="droppable" class="ui-widget-header"> <h1>ここへ</h1> </div> <div id="droppable2" class="ui-widget-header"> <h1>ここへ</h1> </div> <div id="atari1"><h1>1</h1> </div> </div> <div id="atari2"><h1>2</h1></div> </div> <div id="hazure3"><h1>3</h1> </div>

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

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

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

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

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

guest

回答2

0

ベストアンサー

当たりになったかどうかを保存しておく配列を作ります。
当たりになった時に、その配列を操作してtrueを入れるようにします。
また、上記に加えて、当たりになった時にページ移動の判定も行い、2つの当たりが揃った時にページ遷移するようにします。

JS

1 2// 当たりの状態を保存しておく配列。初期値はfalse。 3var flgAtari = { 4 atari1: false, 5 atari2: false 6}; 7 8// 配列を操作して、当たりになった時にtrueを入れるための関数。 9var flgAtariOn = function(key){ 10 flgAtari[key] = true; 11}; 12 13// ページ遷移するかどうかの判定をするための関数 14var determinePageJump = function(){ 15 // atari1とatari2が true になると、if文の条件を満たす 16 if(flgAtari.atari1 && flgAtari.atari2){ 17 location.href = 'http://example.jp/' 18 } 19}; 20 21$("#atari1").draggable() 22$("#droppable").droppable({ 23 accept: "#atari1", 24 drop: function(event, ui) { 25 $(this) 26 .addClass("ui-state-highlight") 27 .find("h1") 28 .html('あたり'); 29 30 flgAtariOn('atari1'); // atari1をtrueにする 31 determinePageJump(); // ページ遷移の判定 32 } 33}); 34 35$("#atari2").draggable() 36$("#droppable2").droppable({ 37 accept: "#atari2", 38 drop: function(event, ui) { 39 $(this) 40 .addClass("ui-state-highlight") 41 .find("h1") 42 .html('あたり'); 43 flgAtariOn('atari2'); //atari2をtrueにする 44 determinePageJump(); // ページ遷移の判定 45 } 46}); 47$("#hazure3").draggable(); 48

投稿2016/02/04 03:09

編集2016/02/04 03:10
yamato_hikawa

総合スコア2092

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

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

0

.html('あたり');のあとに
window.location.href = '/';←任意のURLを入れてみてはいかがでしょう。

投稿2016/02/03 10:25

chiribon

総合スコア10

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

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

3333

2016/02/03 11:19

ご回答ありがとうございます たしかにそれで新しいページにとぶことはできるのですが、 1をドロップ — 新しいページ 2をドロップ — 新しいページ となります しかし、二つともドロップされたときに開きたいので 1をドロップ — あたり ー2をドロップ — 新しいページ 2をドロップ — あたり ー1をドロップ — 新しいページ となるようにしたいです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問