Drag and drop elements
There are also special event handlers for dragging and dropping. We need a starting point to be able to drag and drop something. Let's create the CSS and HTML for a dragging and dropping area.
<!doctype>
<html>
<head>
<style>
.box {
height: 200px;
width: 200px;
padding: 20px;
margin: 0 50px;
display: inline-block;
border: 1px solid black;
}
#dragme {
background-color: red;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
</body>
</html>
Now we are also going to include an element that is going to be dragged and dropped. In order to mark an element as something that can be dragged, we need to add the attribute draggable
. This is the code we are going to include in our second div, with the first div around it:
<...