Comments: This article describes how to drag html elements in html5. To implement drag-and-drop before html5, you need to use js. Now html5 supports the drag-and-drop function internally, however, to implement a slightly complex function, JavaScript is indispensable. The content in this article is about how to implement the html element drag function in html5. To implement drag-and-drop before html5, you need to use js. Now html5 supports the drag-and-drop function, but to implement a slightly complex function, you still need the help of js. Here are several examples.
1. Create a drag object
We can use the draggable attribute to tell the browser which elements need to be dragged. Draggable has three values: true: the element can be dragged; false: the element cannot be dragged; auto: the browser determines whether the element can be dragged.
The default value of the system is auto, but the browser's support for drag-and-drop functions for different elements is different in the case of auto. For example, img objects are supported, and div objects are not supported. Therefore, if you need to drag an element, you 'd better set draggale to true. Here is an example:
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> Example </title>
<Style>
# Src> *
{
Float: left;
}
# Target, # src> img
{
Border: thin solid black;
Padding: 2px;
Margin: 4px;
}
# Target
{
Height: 123px;
Width: 220px;
Text-align: center;
Display: table;
}
# Target> p
{
Display: table-cell;
Vertical-align: middle;
}
# Target> img
{
Margin: 1px;
}
</Style>
</Head>
<Body>
<Div id = "src">
<Div id = "target">
<P id = "msg">
Drop here </p>
</Div>
</Div>
<Script>
Var src = document. getElementById ("src ");
Var target = document. getElementById ("target ");
</Script>
</Body>
</Html>
Running effect:
2. process drag events
Now let's take a look at drag-and-drop events. There are two types of events, one is the drag-and-drop object event, and the other is the advertising area event. Drag events include: dragstart: triggered when an element is dragged; drag: triggered when the element is dragged; dragend: triggered when the element is dragged. The following is an example:
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> Example </title>
<Style>
# Src> *
{
Float: left;
}
# Target, # src> img
{
Border: thin solid black;
Padding: 2px;
Margin: 4px;
}
# Target
{
Height: 123px;
Width: 220px;
Text-align: center;
Display: table;
}
# Target> p
{
Display: table-cell;
Vertical-align: middle;
}
# Target> img
{
Margin: 1px;
}
Img. dragged
{
Background-color: Orange;
}
</Style>
</Head>
<Body>
<Div id = "src">
<Div id = "target">
<P id = "msg">
Drop here </p>
</Div>
</Div>
<Script>
Var src = document. getElementById ("src ");
Var target = document. getElementById ("target ");
Var msg = document. getElementById ("msg ");
Src. ondragstart = function (e ){
E.tar get. classList. add ("dragged ");
}
Src. ondragend = function (e ){
E.tar get. classList. remove ("dragged ");
Msg. innerHTML = "drop here ";
}
Src. ondrag = function (e ){
Msg. innerHTML = e.tar get. id;
}
</Script>
</Body>
</Html>
Running effect:
3. Create a serving area
Let's look at the events related to the serving area: dragenter: triggered when the drag object enters the serving area; dragover: triggered when the drag object moves in the serving area; dragleave: The drag object is not delivered to the serving area, triggered when you leave the serving area; drop: triggered when you drag an object to the serving area.
Let's look at an example:
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> Example </title>
<Style>
# Src> *
{
Float: left;
}
# Target, # src> img
{
Border: thin solid black;
Padding: 2px;
Margin: 4px;
}
# Target
{
Height: 123px;
Width: 220px;
Text-align: center;
Display: table;
}
# Target> p
{
Display: table-cell;
Vertical-align: middle;
}
# Target> img
{
Margin: 1px;
}
Img. dragged
{
Background-color: lightgrey;
}
</Style>
</Head>
<Body>
<Div id = "src">
<Div id = "target">
<P id = "msg">
Drop here </p>
</Div>
</Div>
<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>
</Body>
</Html>
Running result:
4. Use DataTransfer
We use DataTransfer to transmit data from the drag object to the serving area. DataTransfer has the following attributes and Methods: types: returned data format; getData (<format>): returned data in the specified format; setData (<format>, <data> ): set Data in the specified format; clearData (<format>): removes data in the specified format; files: returns the array of files that have been placed.
Let's take a look at the example below, which achieves the same effect as Example 3:
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> Example </title>
<Style>
# Src> *
{
Float: left;
}
# Src> img
{
Border: thin solid black;
Padding: 2px;
Margin: 4px;
}
# Target
{
Border: thin solid black;
Margin: 4px;
}
# Target
{
Height: 123px;
Width: 220px;
Text-align: center;
Display: table;
}
# Target> p
{
Display: table-cell;
Vertical-align: middle;
}
Img. dragged
{
Background-color: Orange;
}
</Style>
</Head>
<Body>
<Div id = "src">
<Div id = "target">
<P id = "msg">
Drop here </p>
</Div>
</Div>
<Script>
Var src = document. getElementById ("src ");
Var target = document. getElementById ("target ");
Target. ondragenter = handleDrag;
Target. ondragover = handleDrag;
Function handleDrag (e ){
E. preventDefault ();
}
Target. ondrop = function (e ){
Var droppedID = e. dataTransfer. getData ("Text ");
Var newElem = document. getElementById (droppedID). cloneNode (false );
Target. innerHTML = "";
Target. appendChild (newElem );
E. preventDefault ();
}
Src. ondragstart = function (e ){
E. dataTransfer. setData ("Text", 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>
</Body>
</Html>
5. Drag a file
Html5 supports the file api, allowing us to operate on local files. Generally, we do not directly use the file api. We can use it with other features, for example, combining drag and drop effects, as shown in the following example:
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> Example </title>
<Style>
Body> *
{
Float: left;
}
# Target
{
Border: medium double black;
Margin: 4px;
Height: 75px;
Width: 200px;
Text-align: center;
Display: table;
}
# Target> p
{
Display: table-cell;
Vertical-align: middle;
}
Table
{
Margin: 4px;
Border-collapse: collapse;
}
Th, td
{
Padding: 4px;
}
</Style>
</Head>
<Body>
<Div id = "target">
<P id = "msg">
Drop Files Here </p>
</Div>
<Table id = "data" border = "1">
</Table>
<Script>
Var target = document. getElementById ("target ");
Target. ondragenter = handleDrag;
Target. ondragover = handleDrag;
Function handleDrag (e ){
E. preventDefault ();
}
Target. ondrop = function (e ){
Var files = e. dataTransfer. files;
Var tableElem = document. getElementById ("data ");
TableElem. innerHTML = "<tr> <th> Name </th> <th> Type </th> <th> Size </th> </tr> ";
For (var I = 0; I <files. length; I ++ ){
Var row = "<tr> <td>" + files [I]. name + "</td> <td>" + files [I]. type + "</td> <td>" + files [I]. size + "</td> </tr> ";
TableElem. innerHTML + = row;
}
E. preventDefault ();
}
</Script>
</Body>
</Html>
DataTransfer returns the FileList object, which can be used as a file array object. The file includes the following attributes: name: file name; type: file type (MIME type); size: file size.
Running effect:
6. upload files
The following describes an example of uploading files by dragging and dropping ajax.
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> Example </title>
<Style>
. Table
{
Display: table;
}
. Row
{
Display: table-row;
}
. Cell
{
Display: table-cell;
Padding: 5px;
}
. Label
{
Text-align: right;
}
# Target
{
Border: medium double black;
Margin: 4px;
Height: 50px;
Width: 200px;
Text-align: center;
Display: table;
}
# Target> p
{
Display: table-cell;
Vertical-align: middle;
}
</Style>
</Head>
<Body>
<Form id = "fruitform" method = "post" action = "/UploadHandler. ashx">
<Div class = "table">
<Div class = "row">
<Div class = "cell label">
Bananas: </div>
<Div class = "cell">
<Input name = "bananas" value = "2"/> </div>
</Div>
<Div class = "row">
<Div class = "cell label">
Apples: </div>
<Div class = "cell">
<Input name = "apples" value = "5"/> </div>
</Div>
<Div class = "row">
<Div class = "cell label">
Cherries: </div>
<Div class = "cell">
<Input name = "cherries" value = "20"/> </div>
</Div>
<Div class = "row">
<Div class = "cell label">
File: </div>
<Div class = "cell">
<Input type = "file" name = "file"/> </div>
</Div>
<Div class = "row">
<Div class = "cell label">
Total: </div>
<Div id = "results" class = "cell">
Items </div>
</Div>
</Div>
<Div id = "target">
<P id = "msg">
Drop Files Here </p>
</Div>
<Button id = "submit" type = "submit">
Submit Form </button>
</Form>
<Script type = "text/javascript">
Var target = document. getElementById ("target ");
Var httpRequest;
Var fileList;
Target. ondragenter = handleDrag;
Target. ondragover = handleDrag;
Function handleDrag (e ){
E. preventDefault ();
}
Target. ondrop = function (e ){
FileList = e. dataTransfer. files;
E. preventDefault ();
}
Document. getElementById ("submit"). onclick = function handleButtonPress (e ){
E. preventDefault ();
Var form = document. getElementById ("fruitform ");
Var formData = new FormData (form );
If (fileList ){
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>
</Body>
</Html>
Effect:
Some examples above may have different running effects for different browsers. I use the chrome browser. Except for example 5 and 6 that do not support multiple files, other examples run normally. You can download the demo.
Demo: Html5Guide.draggable.rar
