Javascript 使用appendTo进行div更改父级

所以我决定学习使用JS和jQuery编程的最好方法是尝试构建我喜欢的东西。所以我决定用最少的HTML，主要是JS和Jquery来制作自己的棋盘

下面的代码渲染一块板，并在瓷砖的起始位置插入图像

$(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('<div class="block'+columnColor+'"><img class="pawn" src="images/whitePawn.png" alt="White Pawn" height="42" width="42"></div>')
            amount++
        }
        else if (amount > 45){
            $(".mainWrapper").append('<div class="block'+columnColor+'"><img class="pawn" src="images/blackPawn.png" alt="White Pawn" height="42" width="42"></div>')
            amount++
        }
        else{
            $(".mainWrapper").append('<div class="block'+columnColor+'"></div>')
            amount++
        }
        switch (columnColor){
            case "White": 
                columnColor = "Black";
                break;
            case "Black":
                columnColor = "White";
                break;
        }
    };
});

console.log("I ran! :D");

$（文档）.ready（函数（）{
//画棋盘
风险价值金额=0；
var columnColor=“黑色”；
而（金额<64）{
如果（金额%9==0）{
数量++
}
否则，如果（金额<18）{
$（“.mainWrapper”）.append（“”）
数量++
}
否则，如果（金额>45）{
$（“.mainWrapper”）.append（“”）
数量++
}
否则{
$（“.mainWrapper”）.append（“”）
数量++
}
开关（彩色）{
“白色”案例：
columnColor=“黑色”；
打破
案例“黑色”：
columnColor=“白色”；
打破
}
};
});
log（“我跑了！：D”）；

我的下一步是让这些碎片能够移动。现在我想我应该使用jQuery的

.draggable

方法来实现这一点。它可以工作（有点），但不能达到我想要的效果，因为它不能以一种干净的方式移动它们（碎片可以重叠正方形），也不能限制用户可以移动的正方形数量

后来我在谷歌上快速搜索，找到了Stackoverflow上的帖子。在那里，他们描述了一种使用

appendTo

将项目移动到另一个父div的方法。这对于我的情况来说是完美的（至少我认为）

尽管我对JS的理解仍然有限，但我还是不知道该怎么做

我知道您需要为所选图像使用某种选择器类。然后需要有一个

单击

事件，将所选图像移动到您单击的div

只是为了你的娱乐，我无法超越你

---

任何帮助或提示都将不胜感激

您可以将一个字段上的

mousedown

与相邻字段上的

mouseup

相结合：

当然，距离是没有限制的，它将适用于整个场地（如果有图像的话）

我添加了一个

preventDefault（）

，因此没有选择会使拖动复杂化的元素

---

为了包含这些片段，您可能需要使用字段的坐标，以实现直接的方法。为此，您可能需要查看

e.clientX

和

getBoundingClientRect

。

您可以使用。单击或.draggable我理解，但我不知道如何使用它们。我现在正在看.mouseup来达到我想要的效果。你能不能给我更多的信息@Yaron？太棒了，这确实有效。如果您向所有字段添加包装器，是否有办法使其正常工作？当然，在演示中，不必为任何div（如

$（'div'）

）使用泛型选择器，您可以通过针对它们的公共类使其特定于同样是国际象棋字段的div。在本例中，这只是一个额外的点：

$（'.div'）

-。

var piece;

$('div').mousedown(function(e) {

    e.preventDefault();
    piece = $(this).find('img');
})
.mouseup(function() {

    $(this).append(piece); // same as piece.appendTo(this);     
});