0

可能重复:
Jquery Drag-Drop(将元素放入)

我正在制造一艘战舰,我正在制定战略。这个想法是用户拖放船只。我的代码看起来像这样。

我的 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>

我的

  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 5 div boardBody 的图像,具体取决于船。实际上,我只有鼠标指向的类名。

提前致谢

4

1 回答 1

0

我建议使用JqueryUI 的 droppable 插件,非常容易使用

在此处查看我的演示。当将 div 拖放到目标中时,它的类会显示在警报框中。请注意,由于插件的功能,其他类被添加到您的可拖动 div 中。

于 2012-05-26T02:16:11.150 回答