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

10. Advanced HTML5 JavaScript > 10.3. Drag and Drop

10.3. Drag and Drop

Problem

You want to implement native drag-and-drop functionality without managing mouse events manually or using a complex library.

Solution

Recognizing how common drag-and-drop interaction is in today’s complex web applications, HTML5 now defines a direct API for handling drag and drop (“D&D”).

To test if the browser supports native D&D functionality, use the following feature-detect:

var dnd_support = 'draggable' in document.createElement('span');

Now, let’s build a simple D&D demo. We’ll begin by setting up some visual styles for our D&D elements:

<style>
#foobar { background-color:yellow; width:100px; height:100px; cursor:move; }
#catcher { background-color:blue; width:150px; height:150px; padding:5px;
    margin-bottom:5px; }
</style>

  

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