Drag and DROP are a common feature, that is, drag to another position after the capture object. In HTML5, the drag and drop is the standard part of the standard. In HTML5, users can use a mouse to select a dragging element, drag the element to a placeable element, and put the mouse button to these elements. During the drag operation, the semi -transparent indicating the mouse pointer can be dragged.
If we hope that the element can be dragged, then we need to set its Draggable property to TRUE (a tag Draggable default is true))
Drag and drop eventSeveral events will be triggered at different stages of the drag and drop operation, and the Datatransfer attribute of the drag and dragging incident shall store the relevant data in the drag and drop operation.
| Dragstart | Active for [source element], when a element starts to be dragged, the user dragged element requires an additional Dragstart event. In this incident, the listener will set up information related to this drag, such as dragging data and images. |
| Dragenter | Active for [Source Element], triggers when the mouse in the dragging into a element. The listener of this incident needs to indicate whether the mouse is allowed to be released in this area. If the listener is not set or the listener is not operated, it is not allowed to be released by default. |
| dragover | Active in [target element], triggers when the mouse moved by a drag. |
| dragLeave | Active in [target element], triggers when the mouse leaving element in dragging. It can be used as a highlight or insert mark that can be released. |
| Drag | Active for [source element], the event is triggered when the element is dragged. |
| drop | Activates for [target element], triggers on the release element when the release of the release of the drag operation. |
| dragnd | Active for [source element], the drag source is triggered at the end of the dragging operation, regardless of whether the operation is successful. |
(When dragging, it will only trigger the dragging related events, mouse events, such as mousemove, which will not be triggered)
Datatransfer objectWhen processing the drag and drop operation, we need to use the Datatransfer object to save the dragged data. DATATRANSFER can save one or more data, one or more data types.
property
| Dropeffect | Dropeffect [String] Specify the actual placement effect, possible value: Copy: Copy to a new position Move: Move to a new position Link: Create a link from a source to a new position None: Forbidden to place (no operation) |
| effectallowed | [String] Specify the allowable effect when dragging, possible values: Copy: Copy to a new position. move: Move to a new position. Link: Create a link from a source to a new location. Copylink: Allow copy or link. Copymove: Allow copy or move. Linkmove: Allow links or move. ALL: Allow all operations. None: Forbidden all operations. Uninitialized: The default value (default value) is equivalent to all. |
| Files | Contains a list of local files available on data transmission. If the drag operation does not involve the drag file, this attribute is a empty list. |
| types | Save a list of types of storage data as the first item, the order is consistent with the order of adding data. If no data is added, a empty list will be returned. |
method
| void addelement (Element Element) | Set the drag source. There is usually no need to change this. If you modify the nodes that will affect the dragging and the Dragend event trigger. The default goal is to be dragged nodes |
| Void Cleardata (String Type) | Delete data associated with a given type. Type parameters are optional. If the type is empty or unspecified, delete all types of associated data. If there is no specified type of data or data transmission does not contain any data, this method will have no effect. |
| String GetData (String Type) | Obtaining a given type of data, if the data of the given type does not exist or the data is stored without containing data, the method will return an empty string. |
| void setdata (String Type, String Data) | Set data for a given type. If the data type does not exist, it will be added to the end, and the last project in this type list will be a new format. If you already exist, replace existing data in the same position. That is, when the same type of data is replaced, the order of the type list will not be changed. |
| void setdragimage (domelement image, long x, long y) | Customize a picture of a expected drag. In most cases, this item does not need to be set, because the dragged node is created as the default picture. Image should be used as a drag feedback image element The horizontal displacement in the x image. The vertical offset in the y statue. |
Browser support
Internet Explorer 9+, Firefox, Opera 12, Chrome and Safari 5+
Demonstration code
<! Doctype html> <html> <gead> <meta charset = UTF-8> <Title> Drag & Drop </Title> <STYLE TYPE = Text/CSS> .BOX {Display: Inline-Block; Width: 100 px; Height: 100px; Border: 1px solid #ccccff; background-color: #cccccff; text-align: center; line-height: 100px;}. Bin {width: 200px; height: 200px ; padding: 10px; border: 1px solid #CCCCFF; Overflow: Hidden; Float: left;} </style> </head> <body> <div style = display: table;> <div class = bin> <div e> can be dragged Elements </div> </div> <div class = bin> & nbsp; </div> </div> <script type = text/javascript> var bins = document.queeryletorall ('. Bin'); VAR BOXS = document .qurySelectOlLL ('. Box'); VAR DRAG = NULL; for (VAR I = 0; I <boxs.length; I ++) {var Box = Boxs [i]; e;} ; Box.ondragstart = Function (E) {e.datatransfer.effectallowed = 'Move'; E.Datatransfer.setdata ('text/plain', e.Target.outerhtml); E.Datatransf ER.SetDragimage (E.Target, 0 , 0); drag = this; return true; }; box.ondragend = function(e) { drag = null; return false }; } for (var i = 0; i < bins.length; i++) { var bin = bins [i]; // When the drag element enters the target element bin.ondragover = function (e) {e.preentDefault (); Return true;}; // The drag element moves bin.ondragentr = functions (e ) {This.style.BackgroundColor = '#eeeeff'; Return True; // Drag the element leave bin.ondragleave = fuund (e) '#fff'; Return True ;}; // Drag the element at the same time on the target element to let go of bin.ondrop = function (e) {if (drag) {drag.parentnode.removechild (drag); this.appendchild (draw);} this. STYLE.BackgroundColor = '#fff'; Return false;};} Document.body.ondrop = Function (E) {e.preventDefault (); e.stopPropagation (); cript> </body> </html "The above is the introduction of the drag and drop -related information in HTML5. Friends who need it can refer to it.