I wrote a guest blog on HTML5’s Drag & Drop for Sitepoint.com. It’s a very simple example that builds a little Scrum Planning Board using a bit of CSS and the new Drag & Drop API. You can view the sample code up on github.



One Response to “HTML5’s Drag and Drop”  

  1. 1 Richard Dickinson

    Hi Alexis
    Thanks for the tutorial-I’m trying to apply this to html5 chess dragndrop but on drop the browser takes me off to the file for the piece image.

    This is the code:
    // bind the drop event on the board sections
       $(‘#A3, #A4, #A5, #A6, #A7, #A8′).bind(‘drop’, function(event) {
               var piece = event.originalEvent.dataTransfer.getData(“text/plain”);
                event.target.appendChild(document.getElementById(piece));
    // Turn off the default behaviour
    // without this, FF will try and go to a URL with your id’s name
                event.preventDefault();
    });

    I do not understand your var notecard code? (I am using chess pieces-so change to var piece). Grateful for your help -thanks