HTML and CSS Reference
In-Depth Information
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
dataTransfer
object.
Table 9-8.
Properties and Methods of the
dataTransfer
Object
Property / Method
Description
effectAllowed
Indicates the types of operations that are to be allowed. The possible values are
none
,
copy
,
copyLink
,
copyMove
,
link
,
linkMove
,
move
,
all
, and
uninitialized
.
dropEffect
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
.
setDragImage()
Sets the given element that is shown during drag operation.
setData()
Sets specific data that is to be transferred.
getData()
Retrieves previously set data for further processing.
clearData()
Removes the previously stored data.
You typically use the properties and methods of the
dataTransfer
object in the
dragstart
and
drop
event handlers.
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
9-5.
Figure 9-5.
Shopping Cart web form
