javascript jQueryで要素をクリックして持ち上げ、他の場所に落とすやり方がわかりません。

文章だけで申し訳ございません。タイトルのように例えばなのですが、将棋ゲームのような駒をクリックして、他のマスにクリックすると動くというようなコードを書きたいのですが、どうしてもうまくいきません。

javascript
1$(function(){
2	$(".koma").on('click', function(){
3		if($("#droppable").length == 0) {
4			$(this).attr("id", "droppable");
5		}else {
6			$(this).attr("id", "disabled");
7		}
8	});
9});

このようなkomaクラスをクリックしたらidにdroppableと設定することまではできましたが、それ以上思い浮かびません。
もうちょっと簡単なやり方や、このようなソースコードが載っているサイトはありますか？
ドロップアンドドロップではないやり方でよろしくお願いします。

質問がすごく分かりにくい内容でしたので追記させていただきます。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<link rel="stylesheet" href="../css/test.css">
6<title>Test</title>
7</head>
8<body>
9<div class="masume"></div>
10<div class="masume"></div>
11<div class="masume"></div>
12<div class="masume"><p class="koma"></p></div>
13<div class="masume"></div>
14<div class="masume"></div>
15<div class="masume"></div>
16<div class="masume"><p class="koma"></p></div>
17<div class="masume"></div>
18<script src="../js/test.js"></script>
19</body>
20</html>

css
1html body {
2	margin: 0;
3}
4.masume {
5	float: left;
6	width: 28px;
7	height: 28px;
8	border: solid 1px #000;
9}
10
11p {
12	background-color: blue;
13	width: 28px;
14	height: 28px;
15	margin: 0;
16}

というページがありまして、次のようなことをさせたいです。

komaクラス以外をクリックしても何も起きない。
komaクラスをクリックするとクリックしたkomaクラスが黄色に変わり、選択状態になる。
komaクラスが選択状態のときにkomaクラスまたはmasumeクラス以外をクリックすると選択状態が解除されて青色に戻る。
komaクラスが選択状態の場合にkomaクラスを含まないmasumeクラスをクリックするとkomaクラスがクリックしたmasumeクラスにkomaクラスが移動し、黄色から青色に変わる。
これらを繰り返すことができる。

という感じのことをjavascriptのtest.jsを使ってやりたいです。自分の説明不足のところがあると思いますが、どういったコードを書けばいいでしょうか？よろしくお願いします。

kei344

2017/04/17 16:59

「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

gomatan1258

2017/04/18 07:20

ご指摘ありがとうございます。今回は、自分の書いたソースコードが全然だめでしたので、質問を追記いたしました。

kei344

2017/04/19 03:32

https://teratail.com/questions/72990 まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

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

回答3件

自己解決

この質問は解決しました。自分の質問の仕方が悪くてご迷惑をおかけしました。これから気を付けます。皆様色々教えていただき、ありがとうございました。

投稿2017/04/19 03:53

編集2017/04/19 04:04

gomatan1258

総合スコア67

jQueryを使用しているのならば、次のような記述になると思います。

javascript
1var $selectedKoma = null;
2
3// 選択された駒のjQueryオブジェクトを変数に代入する
4$('.koma').on('click', function(){
5    $selectedKoma = $(this);
6});
7// 升目をクリックした時に、選択済みの駒が存在する場合は、そこに駒を移動する
8$('.masume').on('click', function(){
9    if(!$selectedKoma){
10        return;
11    }
12    $(this).append($selectedKoma);
13    $selectedKoma = null;
14});