tailieunhanh - build your own ajax web applications PHẦN 10

Bạn có thể thấy snap-tại nơi làm việc khi các mảnh cờ vua kéo "snaps" vào vị trí ở trung tâm của hình vuông mà trên đó nó đã bị bỏ. Snap-xảy ra trong các phương pháp thả:Chương 8: Kéo và thả Tướng với AJAX. Kéo đường hạn chế trên bảng trò chơi, nhưng nó không giống như nó sẽ được cấp phép theo một cái gì đó về chính trị tôi | The drop Method Figure . Drag constraint lines on the game board Snap-to You can see snap-to at work when the dragged chess piece snaps into place in the center of the square on which it was dropped. The snap-to happens in the drop method File excerpt function var calcX 0 var calcY 0 var deltaX 0 var deltaY 0 var colX 0 var colY 0 267 Licensed to siowchen@ Chapter 8 Drag and Drop with AJAX Chess calcX calcY deltaX calcX deltaY calcY calcX deltaX calcX calcY deltaY calcY calcX calcX - 1 calcY calcY - 1 calcX px calcY px colX calcX colY calcY if colX colY colX colY else 5 null The important variables to watch here are deltaX and deltaY. These are the remainders from calculations in which the X and Y mouse positions are divided by the size of a square we get these remainders by using the modulo operator . deltaX and deltaY are the distances between the position at which the piece was dropped and the nearest edge of a square along the X and Y axes respectively. Once we have this number we can figure which direction to snap the piece in by checking whether the number is bigger or smaller than half the height or width of the square. We do this using the getSnap method File excerpt function delta pos if delta 2 pos - delta else pos - delta return pos This makes good sense if you think about it we can work out which way the piece should jump by seeing whether it covers another square by more than half. 268 Licensed to siowchen@ The doMove Method Once we ve got the piece snapping into place it s time to save this move to the back end in drop. We save our piece positions as row and column .