Drag-and-drop is a common feature that grabs an object and then drags it to another location.
In HTML5, drag-and-drop is part of the standard, and any element can be dragged and dropped.
Browser supportInternet Explorer 9, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop.
Note: Drag-and-drop is not supported in Safari 5.1.2.
Drag and drop steps
1. The Draggable property of the object element is set to True (draggable= "true"). It is also important to note that the A element and the IMG element must specify an HREF.
DragStart The dragged element starts the drag-and-drop operation
Drag dragged and dropped elements during drag and drop
DragEnter drag-and-drop elements are dragged and dropped into the range of this element.
DragOver drag-and-drop elements are being dragged and moved within the scope of this element.
DragLeave the element that the mouse passes through during drag-and-drop, leaving the range of this element
Drop drag and drop target element other elements are dragged into this element
Dragend drag-and-drop object element Drag-and-drop operation ends
DataTransfer properties and methods for objects
Attribute/Method Description
The DropEffect property represents the visual effect of a drag-and-drop operation, allowing the setting of its value, which must be used within the range of allowed visual effects specified by the Effectallowed property, allowing the specified value of None, copy, link, move
The Effectallowed property is used to specify the values that can be specified when the element is dragged and dropped, copy, link, move, Copylink, Linkmove, all, none, uninitialized
Types attribute to the kind of data stored, pseudo-array of strings
The void ClearData (domstring format) method clears the data stored in the DataTransfer object, and if the parameter is omitted, format clears all data.
void Stedata (domstring format,domstrong data) to the DataTransfer object
Domstring getData (domstring format) reads data from the DataTransfer object
void Setdragimage (element image,long X,long y) to set the drag-and-drop icon with an IMG element
The ClearData method can be used to purge data from a DataTransfer object.
Effects when dragging and dropping
The visual effects that are allowed when an element is dragged and dropped are typically set in the Ondragstart event, with the following values:
Property Value Description
Copy allows the dragged element to be copied into the project
Move allows the dragged element to be moved to the dragged Target element
Link by drag and drop, the dragged element is connected to the dragged target element
Copylink the dragged element is copied or linked to the dragged target element, depending on the dragged target element to decide whether to perform the copy operation or link operation
Copymove is copied or moved by the dragged element to the target element that is dragged, depending on the target element being dragged to determine whether the copy operation or the move operation
Linkmove the dragged element is connected or moved to the dragged target element, depending on the target element being dragged to determine whether to perform a link operation or a move operation
All allows all drag operations to be performed
None does not allow any drag operations
Uninyialize does not specify the Effectallowed property value. This will perform the drag operation that is allowed by default in the browser, but this operation cannot be obtained by effectallowed property value
The DropEffect property represents the visual effect of the actual drag-and-drop, typically specified in the OnDragOver event, with the allowed values of None, copy, link, move.
======================================================,
Drag and drop case code
1 <!DOCTYPE HTML>2 <HTML>3 <HeadLang= "en">4 <MetaCharSet= "UTF-8">5 <title>html5-Drag and drop</title> 6 <style>7 #tuo{8 background:#e54d26;9 width:200px;Ten Height:120px; One text-align:Center; A font-size:18px; - Line-height:120px; - } the #cun{ - width:200px; - Height:120px; - Border:2px solid #D2D2D2; + Box-shadow:1px 4px 8px #646464; - + } A </style> at <!-- - <script type= "Text/javascript" src= "1.js" ></script> - - <Script> - - functionAllowDrop (EV) { - Ev.preventdefault (); in Ev.dataTranser.dropEffect='Move'; - } to functiondrag (EV) { + - //visual effects that are allowed when dragging and dropping the ev.effeallowed='Link'; * //Storage $ Ev.dataTransfer.setData ("Text", ev.target.id);Panax Notoginseng } - the functionDrop (EV) { + //do not perform default processing (Deny drag and drop) A Ev.preventdefault (); the //use GetData () to get the data, and then assign the value to the + varData=Ev.dataTransfer.getData ("Text"); - //use the AppendChild method to place the dragged node in the element node as his child node $ Ev.target.appendChild (document.getElementById (data)); $ } - </Script> - <Body> the <DivID= "Cun"OnDrop= ' Drop (event) 'OnDragOver= "AllowDrop (event)"></Div> - <BR/>Wuyi <DivID= "Tuo"draggable= "true"ondragstart= "Drag (event)"width= "$"Height= "280">I'm a drag-and-drop uncle.</Div> the - </Body> Wu </HTML>
HTML5 drag-and-drop API
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
