skip to main content

kiesler.at

A hint of chess
updated by rck, 2005-06-27

Granted, Ajax is right now the shooting star amongst JavaScript technologies. And it is cool, think about the improved user experience through better responsiveness. But there are other interesting JavaScipt projects too, maybe a bit hidden behind all that glamour that is Ajax.

A very cool library I discovered recently is Walter Zorn's DHTML Library, enabling programmers to support Drag N Drop amongst other things. Crossbrowser compatible.

                     
1 | 2

What I did

  1. Download the Drag N Drop Library
  2. Unzip it into a web-directory
  3. create a new html file with a 8x8 field table
  4. make two styles, one for black, one for white fields
  5. assign them accordingly
  6. crop out chess pieces with Photoshop
  7. put the images in the table
  8. gave the images distinct names
  9. (important!) specified width and size of images
  10. added a my_DropFunc() to make the pieces snap to the grid

The my_DropFunc() function

function my_DropFunc() {
        var nx=Math.round(dd.obj.x/53)*53;
       var ny=Math.round(dd.obj.y/52)*52;

       dd.obj.moveTo(nx, ny);
}

... dd.obj contains the currently dropped object. I just had to take that object's x- and y coordinates, snap it to multiples of 53 and 52 and call dd.obj.moveTo to move the objects there.

That's about as elegant as it gets.
                     
1 | 2
A small demo
What I did



RSSComments - Make a comment
The comments are owned by the poster. We are not responsible for its content.
RSSAll Articles
2008, 2007, 2006, 2005, 2004