Question

所以我决定学习用JS和jQuery编程的最好方法是尝试构建我喜欢的东西。所以我决定使用最小的HTML和大多数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('<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方法来做到这一点。哪种工作（有点）但不做我想要的，因为它不会以干净的方式移动它们（碎片可以重叠方块）并且它不限制用户可以移动的方块数量。

稍后快速谷歌搜索，我在Stackoverflow上发现了THIS帖子。在那里，他们描述了一种使用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。

使用appendTo进行div更改父

1 个答案: