重複の可能性：
Jqueryドラッグアンドドロップ（ドロップされる要素の取得）
私は戦艦を作っており、戦略を定義しています。アイデアは、ユーザーが船をドラッグアンドドロップすることです。私のコードは次のようになります。
私のHTML
<div id="strategyBoard" class="board">
<h2>Define your Strategy</h2>
<div>
<div class="boardHeader"></div>
<div class="boardHeader">A</div>
<div class="boardHeader">B</div>
<div class="boardHeader">C</div>
<div class="boardHeader">D</div>
<div class="boardHeader">E</div>
<div class="boardHeader">F</div>
<div class="boardHeader">G</div>
<div class="boardHeader">H</div>
<div class="boardHeader">I</div>
<div class="boardHeader">J</div>
</div>
<div>
<div>
<div class="sideHeader">1</div>
<div class="1A boardBody"></div>
<div class="1B boardBody"></div>
<div class="1C boardBody"></div>
<div class="1D boardBody"></div>
<div class="1E boardBody"></div>
<div class="1F boardBody"></div>
<div class="1G boardBody"></div>
<div class="1H boardBody"></div>
<div class="1I boardBody"></div>
<div class="1J boardBody"></div>
</div>
<div>
<div class="sideHeader">2</div>
<div class="2A boardBody"></div>
<div class="2B boardBody"></div>
<div class="2C boardBody"></div>
<div class="2D boardBody"></div>
<div class="2E boardBody"></div>
<div class="2F boardBody"></div>
<div class="2G boardBody"></div>
<div class="2H boardBody"></div>
<div class="2I boardBody"></div>
<div class="2J boardBody"></div>
</div>
<div>
<div class="sideHeader">3</div>
<div class="3A boardBody"></div>
<div class="3B boardBody"></div>
<div class="3C boardBody"></div>
<div class="3D boardBody"></div>
<div class="3E boardBody"></div>
<div class="3F boardBody"></div>
<div class="3G boardBody"></div>
<div class="3H boardBody"></div>
<div class="3I boardBody"></div>
<div class="3J boardBody"></div>
</div>
<div>
<div class="sideHeader">4</div>
<div class="4A boardBody"></div>
<div class="4B boardBody"></div>
<div class="4C boardBody"></div>
<div class="4D boardBody"></div>
<div class="4E boardBody"></div>
<div class="4F boardBody"></div>
<div class="4G boardBody"></div>
<div class="4H boardBody"></div>
<div class="4I boardBody"></div>
<div class="4J boardBody"></div>
</div>
<div>
<div class="sideHeader">5</div>
<div class="5A boardBody"></div>
<div class="5B boardBody"></div>
<div class="5C boardBody"></div>
<div class="5D boardBody"></div>
<div class="5E boardBody"></div>
<div class="5F boardBody"></div>
<div class="5G boardBody"></div>
<div class="5H boardBody"></div>
<div class="5I boardBody"></div>
<div class="5J boardBody"></div>
</div>
<div>
<div class="sideHeader">6</div>
<div class="6A boardBody"></div>
<div class="6B boardBody"></div>
<div class="6C boardBody"></div>
<div class="6D boardBody"></div>
<div class="6E boardBody"></div>
<div class="6F boardBody"></div>
<div class="6G boardBody"></div>
<div class="6H boardBody"></div>
<div class="6I boardBody"></div>
<div class="6J boardBody"></div>
</div>
</div>
</div>
<div class="shipsBoard"> The Boats
<div class="Ship"> <p>Destroyer: </p>
<div><img src="/assets/images/ships/destroyer.png" id="destroyer" width="70px" height="35px"/></div>
</div>
<div class="Ship"> <p>Patrol Ship: </p>
<div><img src="/assets/images/ships/patrolShip.png" id="patrolShip" width="70px" height="35px"/></div>
</div>
<div class="Ship"> <p>Aircraft Carrier: </p>
<div><img src="/assets/images/ships/aircraftCarrier.png" id="aircraftCarrier" width="175px" height="35px"/></div>
</div>
<div class="Ship"> <p>Battleship: </p>
<div><img src="/assets/images/ships/battleship.png" id="battleship" width="140px" height="35px"/></div>
</div>
<div class="Ship"> <p>Submarine: </p>
<div><img src="/assets/images/ships/submarine.png" id="submarine" width="105px" height="35px"/></div>
</div>
</div>
MY JS
var value = 0;
$( "#aircraftCarrier, #battleship, #destroyer, #patrolShip, #submarine" ).draggable({ revert: "invalid"});
$("#aircraftCarrier, #submarine, #patrolShip, #destroyer, #battleship").rotate({
bind:
{
click: function(){
value +=90;
$(this).rotate({ animateTo:value})
}
}
});
$( "#strategyBoard .boardBody" ).droppable({
drop: function(event, ui) {
var position=event.target.className;
alert(position);
},
hoverClass: "hoverClass"
});
私のCSS
使用量が少ない
/* ===== Board Game CSS ========================================================
Author: Team n&n
========================================================================== */
#strategyRoom{
width: 100%;
min-height: 768px;
background: url("/assets/images/batallaNaval.jpg");
background-position:50% 50%;
background-repeat: no-repeat;
font-size: 16px;
}
#strategyBoard {
float: left;
margin-left: 50px;
}
.shipsBoard {
color: black;
float: right;
padding: 40px;
background-color: gray;
.Border-radius;
margin: 50px;
}
.hoverClass{
opacity: 0.4;
}
.boardHeader {
color: white;
margin: 10px;
}
.sideHeader {
width: 20px;
padding: 0;
color: white;
}
私の質問は、divがドロップされたすべてのクラス名を取得するにはどうすればよいですか？ドロップされた要素は、船によって異なりますが、2 o 3 o 4 o 5divboardBodyのサイズの画像です。実際、私はマウスが指しているクラス名しか持っていません。
前もって感謝します