我正在制造一艘战舰，我正在制定战略。这个想法是用户拖拽和放下船。我的代码看起来像这样。
<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>
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"
});
我少用
/* ===== 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 5 div boardBody的图像，具体取决于船舶。实际上，我只有鼠标指向的类名。
提前致谢
答案 0 :(得分：0)
我建议使用JqueryUI's droppable plugin，很容易使用
看一下我的演示here。当div被拖放到目标中时，它的'类显示在警告框中。请注意，由于插件的功能，其他类将添加到您的可拖动div中。