javascript - 使用appendTo使div改变父级

Question

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

下面的代码渲染一个棋盘并在图 block 的起始位置插入图像。

$(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");

我的下一步是让棋子能够移动。现在，一开始我想我会通过使用 jQuery 的 .draggable 方法来做到这一点。它(在某种程度上)有效，但没有做我想要的事情，因为它没有以干净的方式移动它们(碎片可以重叠方 block )，并且它不限制用户可以移动的方 block 数量。

后来通过谷歌快速搜索，我发现了 THIS在 Stackoverflow 上发帖。他们在那里描述了一种使用 appendTo 将项目移动到另一个父 div 的方法。这对于我的情况来说是完美的(至少我认为)。

虽然我对 JS 的理解仍然有限，但我不知道如何做到这一点。

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

仅供大家娱乐，我无法超越THIS 。

感谢任何帮助或提示!

Answer 1

您可以将一个字段上的 mousedown 与相邻字段上的 mouseup 组合起来:

Demo

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 。