Đang chuẩn bị liên kết để tải về tài liệu:
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 8.5. 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 chess.js excerpt this.drop function var calcX 0 var calcY 0 var deltaX 0 var deltaY 0 var colX 0 var colY 0 267 Licensed to siowchen@darke.biz Chapter 8 Drag and Drop with AJAX Chess calcX this.div.offsetLeft calcY this.div.offsetTop deltaX calcX Chess.squareSize deltaY calcY Chess.squareSize calcX this.getSnap deltaX calcX calcY this.getSnap deltaY calcY calcX calcX Chess.pieceOffset - 1 calcY calcY Chess.pieceOffset - 1 this.div.style.left calcX px this.div.style.top calcY px colX Chess.calcColFromPos calcX colY Chess.calcColFromPos calcY if Chess.selectPiece.wasMoved colX colY Chess.doMove colX colY else this.div.style.zIndex 5 this.div 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 chess.js excerpt this.getSnap function delta pos if delta Chess.squareSize 2 pos Chess.squareSize - 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@darke.biz 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 .