Home > Article > Web Front-end > Html5 implements how to drag and drop images between two div elements

Html5 implements how to drag and drop images between two div elements

高洛峰Original: 2017-03-12 16:42:301595browse

Call preventDefault() to avoid the browser's default processing of data (the default behavior of drop event is to open it as a link) through dataTransfer. The getData(Text) method obtains the dragged data. Interested friends can refer to it

Original effect

# #The effect after dragging

Html5 implements how to drag and drop images between two div elements

The code is as follows

The code is as follows:

[code]
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#p1, #p2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<img  src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" / alt="Html5 implements how to drag and drop images between two div elements" >
<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)">
 </p>
<p id="p2" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
</body>
</html>

[/code]

It looks like It may be a bit complicated, but we can study different parts of the drag and drop event separately.

Set the element to be draggable

First, in order to make the element draggable, set the draggable

attribute

to true:
The code is as follows:

<img  draggable="true" / alt="Html5 implements how to drag and drop images between two div elements" >

What to drag - ondragstart and setData()

Then, specify what will happen when the element is dragged.

In the above example, the ondragstart attribute calls a

function

, drag(event), which specifies the data to be dragged. dataTransfer.setData() method sets the

data type

and value of the dragged data:

The code is as follows:

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

In this example, the data type is "Text" and the value is the id of the draggable element ("drag1").

Where to place - ondragover

ondragover event specifies where to place the dragged data.

By default, data/elements cannot be placed into other elements. If we need to allow placement, we must prevent the default handling of the element.

This is done by calling the

event

.preventDefault() method of the ondragover event:
The code is as follows:

event.preventDefault()

- ondrop

When the dragged data is placed, the drop event will occur.

In the above example, the ondrop attribute calls a function, drop(

event

):
The code is as follows:

function drop(ev) 
{ 
ev.preventDefault(); 
var data=ev.dataTransfer.getData("Text"); 
ev.target.appendChild(document.getElementById(data)); 
}

Code explanation:

Call preventDefault() to avoid the browser's default processing of data (the default behavior of the drop event is to open it as a link) obtained through the dataTransfer.getData("Text") method The data being dragged. This method will return any data set to the same type in the setData() method. The dragged data is the id of the dragged element ("drag1"). Append the dragged element to the placed element (target element)

The above is the detailed content of Html5 implements how to drag and drop images between two div elements. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5 registration page sample codeNext article：HTML5 registration page sample code

See more

Html5 implements how to drag and drop images between two div elements

Related articles