Draggable elements shift position after invoking remove()
Hello all,
I'm working on a game/experiment that is similar to chess. A big <div> element is the board and I have little <img> elements inside it that act like pieces/figures which I can drag around the board. So everything is working fine up to that point.
The problem comes when I capture an opponent's piece. Like in chess, the captured piece has to be removed from the board, so when that event happens I invoke the remove() method to remove the little <img> from the board <div>. But when one little <img> is removed from the board, all the other pieces shift their position and the result is a total mess.
I understand this is not a bug and that it is sort of an expected behaviour, because the remaining <img> elements are rearranged inside the board, right? However, I really need to know if this can be avoided, either by CSS, JavaScript or HTML, I tried messing with the jQueryUI position but still no dice. So I really appreciate any hint or advice to solve this situation.
Thanks in advance,
Carlos