Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to write the code to achieve the drag-and-drop function in HTML5". In the daily operation, I believe that many people have doubts about how to write the code to achieve the drag-and-drop function in HTML5. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the question of "how to write the code to achieve drag-and-drop function in HTML5". Next, please follow the editor to study!

About drag and drop in HTML5

Drag and drop (Drag and Drop) is a common feature that grabs objects and then drags them to another location. In HTML5, drag and drop is part of the standard. In HTML5, users can use the mouse to select a draggable element, drag elements to a placeable element, and drop them by releasing the mouse button. During a drag operation, the translucent representation of a draggable element follows the mouse pointer.

If we want the element to be dragged, we need to set its draggable attribute to true (a tag draggable defaults to true)

Drag and drop event

Several events are triggered at different stages of the drag-and-drop operation, and the dataTransfer attribute of the drag-and-drop event stores the relevant data in the drag-and-drop operation.

Dragstart acts on [source element] and triggers when an element starts to be dragged, and the element dragged by the user needs to attach a dragstart event. In this event, the listener will set information related to the drag, such as the data and images of the drag. Dragenter acts on the source element and triggers when the mouse is dragged into an element. The listener for this event needs to indicate whether the mouse is allowed to be released in this area. If no listener is set, or if the listener does not operate, release is not allowed by default. Dragover acts on the target element and triggers when the mouse moves over an element during the drag. Dragleave acts on the target element and triggers when the mouse in the drag leaves the element. Can be removed as a highlight or insertion mark that releases feedback. Drag acts on the source element, and the event is triggered when the element is dragged. Drop acts on the target element and triggers on the release element at the end of the drag-and-drop operation. Dragend acts on the source element, and the drag source is triggered at the end of the drag operation, regardless of whether the operation is successful or not.

(only drag-related events will be triggered when dragging, but mouse events, such as mousemove, will not be triggered.)

DataTransfer object

When dealing with drag-and-drop operations, we need to use the DataTransfer object to hold the data being dragged. DataTransfer can hold one or more pieces of data, one or more data types.

Attribute

DropEffectdropEffect

[String] specify the actual placement effect, possible values:

Copy: copying to a new location

Move: move to a new location

Link: establish a link from the source location to the new location

None: prohibit placement (prohibit any operation) effectAllowed [String] specifies the effect allowed when dragging, possible values:

Copy: copy to a new location.

Move: move to a new location.

Link: establish a link from the source location to the new location.

CopyLink: copy or link is allowed.

CopyMove: allow copying or moving.

LinkMove: allow linking or moving.

All: all operations are allowed.

None: all operations are prohibited.

Uninitialized: the default value (default), which means that all.files contains a list of all local files available on the data transfer. If the drag operation does not involve dragging a file, this property is an empty list. Types keeps a list of types of stored data as the first item, in the same order as the data being added. If no data is added, an empty list is returned.

Method

Void addElement (Element element) sets the drag source. There is usually no need to change this item, which will affect which node of the drag and the trigger of the dragend event. The default target is the dragged node void clearData (String type) to delete the data associated with a given type. Type parameters are optional. If the type is empty or unspecified, the data associated with all types is deleted. This method has no effect if the specified type of data does not exist, or if the data transfer does not contain any data. String getData (String type) gets the data of the given type, and if the data of the given type does not exist or the data rollover does not contain the data, the method returns an empty string. Void setData (String type,String data) sets the data for a given type. If the data type does not exist, it will be added to the end of, so that the last item in the type list will be the new format. If the data type already exists, replace the existing data in the same location. That is, when the same type of data is replaced, the order of the type list is not changed. Void setDragImage (DOMElement image,long XMagneLong y) customizes a desired picture when dragging. In most cases, this is not set because the dragged node is created as the default image.

Image to be used as a drag feedback image element

The horizontal offset in the X image.

The vertical offset in the image.

Browser support

Internet Explorer 9 +, Firefox, Opera 12, Chrome and Safari 5 +

Demo code

Drag & Drop.box {display: inline-block; width: 100px; height: 100px; border: 1px solid # ccccff; background-color: # ccccff; text-align: center; line-height: 100px;} .bin {width: 200px; height: 200px; padding: 10px; border: 1px solid # ccccff; overflow: hidden; float: left } draggable elements var bins = document.querySelectorAll ('.bin'); var boxs = document.querySelectorAll ('.box'); var drag = null; for (var I = 0; I < boxs.length; iTunes +) {var box = boxs [I] Box.onselectstart = function () {return false;}; box.ondragstart = function (e) {e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData (' text/plain', e.target.outerHTML); e.dataTransfer.setDragImage (e.target, 0,0); drag = this Return true;}; box.ondragend = function (e) {drag = null; return false};} for (var I = 0; I < bins.length; iTunes +) {var bin = bins [I] / / when dragging an element into the target element bin.ondragover = function (e) {e.preentDefault (); return true;}; / / drag the element to move bin.ondragenter = function (e) {this.style.backgroundColor ='# eeeeff' on the target element Return true;}; / / drag the element away from the target element bin.ondragleave = function (e) {this.style.backgroundColor ='# fff'; return true;} / / the dragged element simultaneously releases the mouse over the target element bin.ondrop = function (e) {if (drag) {drag [XSS _ clean] .removeChild (drag); this.appendChild (drag);} this.style.backgroundColor ='# Child Return false;};} document.body.ondrop = function (e) {e.preventDefault (); e.stopPropagation ();} at this point, the study on "how to write the code to implement drag-and-drop in HTML5" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.