JQuery chess board implementation code_jquery

I didn't think there was anything wrong with it at the time. Looking back today, I thought it was a bit interesting, so I brought it to everyone for identification.

First of all, we need to realize the arrangement of chess pieces, which undoubtedly requires the use of div css.

For the specific code, you can see the chess board made by Jquery (view the source code).

At first I wrote classes for each type of chess piece. In fact, this was a relatively stupid behavior. First of all, this css code will be redundant. Secondly, it will be more troublesome to bind the listener to the chess piece div. To determine whether it is a chess piece div, I have to rely on the -b and -w suffixes in the class name to determine whether it is a chess piece. But if we extract the common attributes of chess pieces and designate a class qizi, then both problems can be easily solved.

I deliberately did not remove the previous code in the code, you can see it in the commented code. In order to make both the black and white flags moveable, I had to write a method on both sides. You see, this is the consequence of not abstracting enough.

The next step is to implement dragging. Regarding this, you can refer to

Package download address

Content comes from: http:/ /buhutuu.cn/?p=783