Html5 implements how to drag and drop images between two div elements-H5 Tutorial-php.cn

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

高洛峰

Release： 2017-03-12 16:42:30

Original

1620 people have browsed it

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

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

# #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]

Copy after login

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

Copy after login

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);
}

Copy after login

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()

Copy after login

- 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)); 
}

Copy after login

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!