Question

我正在尝试使用jquery drag n drop创建一个手动创建网球阵容的应用。有一个#Sideline div，它有#Player div。有一个带有象限的#Court div（每个玩家一个）

我想将可赎回的div限制在球场上，他们会对象限（这是有效的）我还想加入让球员回到场边的能力（但限制下降到球场或者边线。

我已经创建了一个jsfiddle来演示。

感谢您的帮助！保罗

$(".player").draggable();

$(".court_quarter").droppable({
  accept: ".player",
  drop: function(event, ui) {
    var droppable = $(this);
    var draggable = ui.draggable;
    // Move draggable into droppable
    draggable.appendTo(droppable);
    draggable.css({
      top: '0px',
      left: '0px'
    });
  }
});

$("#Lineup").droppable({
  accept: ".player",
  drop: function(event, ui) {
    var droppable = $(this);
    var draggable = ui.draggable;
    // Move draggable into droppable
    draggable.appendTo(droppable);
    draggable.css({
    });
  }
});

.court_quarter {
  width: 100px;
  height: 50px;
  background-color: #40A14C;
  border-style: solid;
  border-color: white;
}

.court_name {
  text-align: center;
  font-family: Arial Black;
}

.player {
  width: 100px;
  height: 50px;
  text-align: center;
  letter-spacing: 2px;
  font-family: Arial Black;
  display:inline-block;
}

.male {
  background-color: dodgerblue;
}

.female {
  background-color: deeppink;
  ##FF1493;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border=1 color=black>

  <tr>
    <th colspan=2>
      <div id="#Court1" class="court_name">COURT 1</div>
    </th>
  </tr>

  <tr>
    <td>
      <div id="GridDiv1" class="court_quarter"></div>
    </td>
    <td>
      <div id="GridDiv2" class="court_quarter"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="GridDiv3" class="court_quarter"> </div>
    </td>
    <td>
      <div id="GridDiv4" class="court_quarter"> </div>
    </td>
  </tr>
</table>

<br>

<table border=1 color= black height=100 width = 100%>
<tr>
<td>
<div id="Lineup" style="text-align: left">
<div id="Player1" class="player male">
  <br>PAUL</div>
<div id="Player2" class="player male">
  <br>CHERYL</div>
<div id="Player3" class="player female">
  <br>SHANON</div>
<div id="Player4" class="player female">
  <br>DAYONG</div>
   
  </div>
</td>
</tr>
</table>

<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

两个div上的jquery droppable

0 个答案: