使用appendTo使一个div变化的父母 [英] Using appendTo to make a div change parents

问题描述

所以我决定，我要学会与JS和jQuery编程的最好办法是尝试建立的东西，我喜欢。所以我决定用最少的HTML和JS大多和jQuery，使我自己的棋盘。

So I decided that the best way for me to learn to program with JS and jQuery was to try and build something that I liked. So I decided to make my own Chess board using minimal HTML and Mostly JS and Jquery.

下code呈现一个板和地砖的起始位置插入图像。

The code below renders a board and inserts images on the starting positions of the tiles.

$(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 办法做到这一点。其中一期工程（差不多），但并没有做什么，我希望它，因为它不动他们在一个干净的方式（件可以重叠广场），它并不限制正方形用户可以移动的量。

My next step would be to make the pieces be able to move. Now at first I figured I would do this by using jQuery his .draggable method. Which works (sort of) but doesn't do what I want it to since it doesn't move them in a clean way (pieces can overlap squares) and it doesn't limit the amount of squares a user can move.

，我发现<一个href=\"http://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element\">THIS发布＃2。在那里，他们描述的方式来使用 appendTo 将项目移至另一个父分区。这将是完美的（至少我认为）我的情况。

So a quick google search later and I found THIS post on Stackoverflow. There they described a way to use appendTo to move items to another parent div. This would be perfect (at least I think) for my situation.

虽然因为我的JS的了解仍然有限，我不能换我围​​绕如何做到这一点的头。

Although since my understanding of JS is still limited I cant wrap my head around how to do that.

据我了解，你会需要某种选择器类为所选图像。然后需要有一个点击事件所选择的图像移动到你点击的DIV。

I understand that you would need some kind of selector class for a selected image. Then there needs to be a click event that moves the selected image to the div you clicked on.

只是供您娱乐休闲我无法超越本。

Just for your entertainment I couldn't surpass THIS.

任何帮助或提示是AP preciated！

Any help or hints are appreciated!

推荐答案

您可以结合一个鼠标按下上有一个字段鼠标松开在相邻的一个：

You could combine a mousedown on one field with a mouseup on the adjacent one :

演示

var piece;

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

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

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

有没有限制的距离还没有，当然，这对于整场病工作（如果有图片）

There's no limit to the distance yet of course and it ill work for the whole field (if there is an image).

我添加了一个 preventDefault（）所以没有元素的选择变得复杂拖动。

I've added a preventDefault() so there's no selection of the element which complicates dragging.

有关含有的作品，你可能会与该领域的一个直接的方法坐标工作。你可能会想看看 e.clientX 和 getBoundingClientRect 为

For containing the pieces you'll probably have to work with the coordinates of the fields for a straight forward approach. You might wanna look into e.clientX and getBoundingClientRect for that.

这篇关于使用appendTo使一个div变化的父母的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！