使用appendTo进行div更改父项

所以我决定让我学习用JS和jQuery编程的最好方法是尝试构建我喜欢的东西。 所以我决定使用最小的HTML和Mostly JS和Jquery制作我自己的Chess板。

下面的代码渲染板并在图块的起始位置插入图像。

$(document).ready(function(){ //draw the chess board var amount = 0; var columnColor = "Black"; while(amount < 64){ if(amount % 9 === 0){ amount++ } else if (amount < 18){ $(".mainWrapper").append('
') amount++ } else if (amount > 45){ $(".mainWrapper").append('
') amount++ } else{ $(".mainWrapper").append('
') amount++ } switch (columnColor){ case "White": columnColor = "Black"; break; case "Black": columnColor = "White"; break; } }; }); console.log("I ran! :D"); 

我的下一步是让这些碎片能够移动。 现在起初我想通过使用jQuery他的.draggable方法来做到这一点。 哪种工作（有点）但不做我想要的，因为它不会以干净的方式移动它们（碎片可以重叠方块）并且它不限制用户可以移动的方块数量。

所以稍后快速谷歌搜索，我在Stackoverflow上发现了这篇文章。 在那里，他们描述了一种使用appendTo将项目移动到另一个父div的方法。 对于我的情况，这将是完美的（至少我认为）。

虽然由于我对JS的理解仍然有限，但我无法理解如何做到这一点。

我知道你需要某种选择器类的选择器类。 然后需要一个click事件将所选图像移动到您单击的div。

只是为了你的娱乐我无法超越这个 。

任何帮助或提示表示赞赏！

Answer 1

您可以将一个字段上的mousedown与相邻字段上的mouseup ：

演示

 var piece; $('div').mousedown(function(e) { e.preventDefault(); piece = $(this).find('img'); }) .mouseup(function() { $(this).append(piece); // same as piece.appendTo(this); }); 

当然，距离没有限制，并且它对整个领域都不起作用（如果有图像）。

我添加了一个preventDefault()因此没有选择使拖动变得复杂的元素。

对于包含碎片，您可能需要使用字段的坐标来进行直接处理。 您可能想要查看e.clientX和getBoundingClientRect 。