html5 guide - 3. How to implement html element drag and drop function

Author：Eve Cole Update Time：2025-04-12 09:48:02

The content of this article is about how to implement the html element drag function in HTML5/">html5. To implement drag and drop before html5, you need to use js. Now html5 supports drag and drop function internally, but to implement slightly more complex functions, JS is indispensable. Let’s look at a few examples below.

1. Create a drag object

We can tell the browser through the draggable attribute which elements need to implement the drag and drop function. 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 by itself.

The default value of the system is auto, but the browser supports different drag and drop functions of different elements in the case of auto, such as: it supports img objects, but does not support div objects. So, if you need to drag an element, it is best to set draggale to true. Let's look at an example below:

<!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>

drop here</p>

</div>

var src = document.getElementById("src");

var target = document.getElementById("target");

</script>

</body>

</html>

Running effect:

2. Handle drag and drop events

Now let’s understand the events related to dragging. There are two types of events, one is the event of the drag object, and the other is the event of the drop area. Drag events include: dragstart: triggered when element drag starts; drag: triggered during element drag; dragend: triggered when element drag ends. Let's take an example below:

<!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>

drop here</p>

</div>

var src = document.getElementById("src");

var target = document.getElementById("target");

var msg = document.getElementById("msg");

src.ondragstart = function (e) {

e.target.classList.add("dragged");

}

src.ondragend = function (e) {

e.target.classList.remove("dragged");

msg.innerHTML = "drop here";

}

src.ondrag = function (e) {

msg.innerHTML = e.target.id;

}

</script>

</body>

</html>

Running effect:

3. Create a delivery area

Let's look at events related to the delivery area: dragenter: triggered when the drag object enters the delivery area; dragover: triggered when the drag object moves in the delivery area; dragleave: the drag object is not delivered to the delivery area, and triggered when it leaves the delivery area; drop: triggered when the drag object is placed in the delivery area.

Let's take a look at an example:

<!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>

drop here</p>

</div>

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.target.id;

e.target.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 results:

4. Use DataTransfer

We use DataTransfer to pass data from drag objects to the delivery area. DataTransfer has the following properties and methods: types: return the format of the data; getData(<format>): returns the specified format data; setData(<format>, <data>): sets the specified format data; clearData(<format>): removes the specified format data; files: returns the file array that has been delivered.

Let’s look at the following example, the effect it achieved is the same as Example 3:

<!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>

drop here</p>

</div>

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.target.id);

e.target.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 and drop the file

html5 supports file API, which allows us to manipulate local files. Generally, we do not use the file API directly. We can use it in combination with other features, such as combining drag and drop effects, as shown in the following example:

<!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>

Drop Files Here</p>

</div>

</table>

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 a FileList object, which we can treat as a file array object, and the file contains the following properties: name: file name; type: file type (MIME type); size: file size.

Running effect:

6. Upload files

The following is an example of uploading files by dragging and dropping ajax.

<!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>

<div>

Bananas:</div>

<div>

</div>

<div>

Apples:</div>

<div>

</div>

<div>

Cherries:</div>

<div>

</div>

<div>

File:</div>

<div>

</div>

<div>

Total:</div>

items</div>

</div>

Drop Files Here</p>

</div>

Submit Form</button>

</form>

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 of the above examples may have different browsers running effects. I am using a chrome browser. Except for examples 5 and 6 that do not support multiple files, other examples run normally. You can download the demo.

demo download address: Html5Guide.draggable.rar