Html5 drag and drop

Html5 drag and drop

1) create a source project

1.1) value of the draggable attribute:

True -- this element can be dragged;

False -- the element cannot be dragged;

Auto-the browser can decide whether an element can be dragged;

1.2) events of the dragged element:

Dragstart -- triggered when the element is dragged;

Drag-triggered repeatedly when an element is dragged;

Dragend -- triggered when the drag operation is complete;

2) create a release zone

2.1) release zone event:

Dragenter -- triggered when the dragged element enters the screen space occupied by the release area;

Dragover -- triggered when the dragged element is triggered in the release zone;

Dragleave -- triggered when the dragged element leaves the release zone if it is not put;

Drop -- triggered when the dragged element is put down in the release area;

 

Drop Here

<Script> var src = document. getElementById (src); var target = document. getElementById (target); var msg = document. getElementById (msg); var draggedID; target. ondragenter = handleDrag; target. ondragover = handleDrag; function handleDrag (e) {e. preventDefault ();} target. ondrop = function (e) {var newElem = document. getElementById (draggedID ). cloneNode (false); target. innerHTML =; target. appendChild (newElem); e. preventDefault ();} src. ondragstart = function (e) {draggedID = e.tar get. id; e.tar get. classList. add (dragged);} src. ondragend = function (e) {var elems = document. querySelectorAll (. dragged); for (var I = 0; I <elems. length; I ++) {elems [I]. classList. remove (dragged) ;}}</script> 3) use the DataTransfer object

3.1) the object distributed together with the event triggered by the drag-and-drop operation is DragEvent, which is derived from MouseEvent.

Additional attributes defined by the DragEvent object:

DataTransfer -- returns the object used to transmit data to the release zone (DataTransfer );

3.2) properties defined by the DataTransfer object:

Types -- format of the returned data;

GetData (<script> var target = document. getElementById (target); var httpRequest; var fileList; document. getElementById (submit ). onclick = handleButtonPress; target. ondragenter = handleDrag; target. ondragover = handleDrag; function handleDrag (e) {e. preventDefault ();} target. ondrop = function (e) {fileList = e. dataTransfer. files; e. preventDefault ();} function handleButtonPress (e) {e. preventDefault (); var form = document. getElementById (fruitform); var formData = new FormData (form); if (fileList | true) {for (var I = 0; I <fileList. length; I ++) {formData. append (file + I, fileList [I]) ;}} httpRequest = new XMLHttpRequest (); httpRequest. onreadystatechange = handleResponse; httpRequest. open (POST, form. action); httpRequest. send (formData);} function handleResponse () {if (httpRequest. readyState = 4 & httpRequest. status = 200) {var data = JSON. parse (httpRequest. responseText); document. getElementById (results ). innerHTML = You ordered + data. total + items ;}}</script>