HTML and CSS Reference
Transferring Data Between Drag-and-Drop Operations
Most of the time, dragging something and dropping it onto something else also calls for transferring some
data between the source and the target elements. To accomplish this data transfer, HTML5 provides the
dataTransfer object. The dataTransfer object is accessible in various drag-and-drop events through the
event object passed to the event handlers. Table 9-8 lists some of the important properties and methods of
Table 9-8. Properties and Methods of the dataTransfer Object
Property / Method
Indicates the types of operations that are to be allowed. The possible values are
none , copy , copyLink , copyMove , link , linkMove , move , all , and uninitialized .
Indicates the type of operation that is currently selected. If the type of operation
isn't supported by the effectAllowed attribute, then the operation fails. The
possible values are none , copy , link , and move .
Sets the given element that is shown during drag operation.
Sets specific data that is to be transferred.
Retrieves previously set data for further processing.
Removes the previously stored data.
You typically use the properties and methods of the dataTransfer object in the dragstart and drop
Implementing Drag-and-Drop: A Shopping Cart
Now let's put your knowledge to work in a simple yet functional Shopping Cart web form, shown in Figure
Figure 9-5. Shopping Cart web form