Move div between two columns in jQuery

in code


This annoyed the hell out of me for about three hours. I was asked to write a simple JavaScript game wherein you click or tap on elements in the left column to move them to the right in the correct order, and vice versa. If I set a left-to-right handler, this would carry over when the div was in the right div, which would effectively trap it there unless I reset the entire board.

My first solution was a recursive function that reset all associated click events on a click. It worked…for two or three cycles, before it crashed the browser.

My next solution was to not mess with the click handler, and instead just move the div to the first sibling of the parent:

$(div.leftCol).children().click(function() {
    $(this).appendTo($(this).parent().siblings().first());
});

Everything starts off in the left column. So if you want a click handler to swap between two columns-here you are.



Decompression

in me


Your email address will not be published. Required fields are marked *