Question

我有用于检查td是否包含图像的代码，因为我想移动人物。我想不止一次地移动我的身材，但仅在没有其他身材的地方。但是，当我尝试将身材移回初始位置时，它确实起作用。这是一个示例：

$(document).ready(function(){
  $("#king").draggable();
  $("td").droppable({
      stop: function(event, ui)
      {
        ui.draggable.remove();
      },
      drop: function(event, ui) {
if($(event.target).find('img').length >0)
      {
          $(ui.draggable).draggable({revert:true});
      }else 
      {
        $(ui.draggable).draggable({revert:false});
        var $this = $(this);
          ui.draggable.position({
          my: "center",
          at: "center",
          of: $this,
        using: function(pos) {
          $(this).animate(pos, 200, "linear");
        }
      });
      }
  }
});
});

td{
  border: 1px black solid;
	width: 90px;
	height: 90px;
}
img{
  width: 80px;
	height: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<table>
<tr>
  <td id="drop_one"><img src="http://www.houseofchess.com/images/chess_pieces/wooden_staunton/shared/216777-375/nqw.jpg" id="king"></td>
  <td id="drop_two"></td>
</tr>
<tr>
  <td id="drop_one"><img src="http://www.houseofchess.com/images/chess_pieces/wooden_staunton/shared/216777-375/nqw.jpg" id="king"></td>
  <td id="drop_two"></td>
</tr>
</table>

如您所见，我试图在停止后删除它，但这只是愚蠢的尝试。如何从起始位置删除图像，以便可以返回到图像？还是我应该改变我是否要检查字段中是否包含图像的其他方式？

Answer 1

由于您实际上并未从原始td删除图像，而只是将其重新定位到新td的位置，因此出现了问题。对于DOM来说，它仍然是原始td的子元素，因此当您find('img')时，它将看到一个图像（实际上是它本身）在该放置区域中。

您可以做的是将图像实际重新定位到新的td。这可以通过从原始detach td和新appendTo td对其进行$(document).ready(function(){ $(".king").draggable(); $("td").droppable({ drop: function(event, ui) { if($(event.target).find('img').length > 0) { $(ui.draggable).draggable({revert:true}); } else { $(ui.draggable).draggable({revert:false}); var $this = $(this); ui.draggable.position({ my: "center", at: "center", of: $this, using: function(pos) { $(this).animate(pos, 200, "linear", function() { $(this).detach().appendTo($this); $(this).css({ top: '2px', left: '2px'}); }); } }); } } }); });实现。动画制作完成后，我就这样做了。

table#board {
    border-collapse: collapse;
}

#board tr:nth-child(odd) td:nth-child(even), #board tr:nth-child(even) td:nth-child(odd) {
    background-color: #663300;
}

td {
    border: 1px black solid;
	width: 50px;
	height: 50px;
}
img {
    width: 46px;
	height: 46px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<table id="board">
<tr>
  <td><img src="http://www.houseofchess.com/images/chess_pieces/wooden_staunton/shared/216777-375/nqw.jpg" class="king"></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td><img src="http://www.houseofchess.com/images/chess_pieces/wooden_staunton/shared/216777-375/nqw.jpg" class="king"></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
</table>

{{1}}

拖动后如何删除对象？ jQuery UI

1 个答案: