These days usage of smartphones and other touch screen enabled devices makes drag and drop feature of any application essential. It is difficult task to implement drag and drop on the web and make it work consistent across multiple browsers and platforms. Traditionally, web developer relied on several DOM events to develop drag and drop capability in their web applications. They relied on such DOM events as: mousedown, mousemove, mouseout, mouseup and mouseover. Developing Drag and Drop using these low level events is cumbersome at best and prone to lots of error when other content type is added to web page.

HTML5 Drag and Drop is modeled after desktop based application. As a result, HTML5 drag and drop is easy to implement and requires less development effort.

There are several important concepts that we need to cover while reviewing HTML5 drag and drop functionality. First, there are two different places that we need to account for: Drag Source and Drop Target. In addition, there is another concept we need to be aware of The Data Transfer. This Data Transfer object exposes a lot of information to use during drag and drop process. For instance, it exposes information about actual move of the object, type of the object (text, link, image) and other useful drag operation specific info. It is important to note that MIME of the object can influence how drop target reacts to the object being drag across the careen and placed into drop target zone.