Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

5. User Interactions > Hack 47. Update the DOM with a Drag-and-Drop Data Transf...

Hack 47. Update the DOM with a Drag-and-Drop Data Transfer Object

HTML5 drag-and-drop imparts a true relationship between the dragged item and the drop zone. This hack shows you how to transfer data between the two using drag data, and then updating the DOM from the information that is transferred.

As you might have guessed, HTML5 drag-and-drop provides a much richer interaction than what was available in the past with just JavaScript. HTML5 publishes a slew of DOM events telling us what is going on all along the way.

Many times you drag an element because you want to move it to another place on the page. This requires that your dragged item and your drop zone be able to communicate the appropriate information. Luckily, HTML5 has an API for that!


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free 10-Day Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint