Using appendTo to make a div change parents

Question

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.

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

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.

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.

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

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.

Any help or hints are appreciated!

I understand although i have no idea how to use either. I'm currently looking at .mouseup to do the effect i want. Could you maybe give me some more information @Yaron ? — Marco Geertsma, Jan 19 '16 at 14:17

Shikkediel · Accepted Answer · 2016-01-19T19:03:14.443

3

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

Demo

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).

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

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.

edited Jan 19 '16 at 19:03

answered Jan 19 '16 at 18:13

Shikkediel

5,195
16
45
77

Awesome, that works indeed. Is there a way to make that work if you add a wrapper to all fields? http://codepen.io/anon/pen/rxYXxo – Marco Geertsma Jan 20 '16 at 08:07
Sure, then instead of using a generic selector for any div like `$('div')` in the demo you could make it specific to the divs that are also chess fields by targeting their common class. In this case that would be just an extra dot : `$('.div')` - [example](http://codepen.io/anon/pen/GoOVEW). – Shikkediel Jan 20 '16 at 08:33

Using appendTo to make a div change parents

1 Answers1

Linked