HTML and CSS Reference
In-Depth Information
A lot happens in a drag-and-drop operation, starting with the
dragstart
event. The
drag
event continues to fire while the element is being dragged. As the element is dragged over
other elements, each of those other elements'
dragenter
,
dragover
, and
dragleave
events fire.
When the element finishes being dragged, its
dragend
event fires and the
drop
event of a
target element fires. You can use all these events in combination to provide visual feedback to
users that the drag operation is occurring and what might be a potentially valid drop location.
The following HTML demonstrates this functionality:
<head>
<style>
.dropped {
width: 50%;
height: 50%;
position: relative;
top: 25%;
left: 25%;
background-color:black;
}
.over {
transform: scale(1.1);
}
.bucket {
width: 100px;
height: 100px;
margin: 10px 10px 10px 10px;
position:absolute;
}
.chip {
width:20px;
height:20px;
position:absolute;
}
div:first-of-type {
background-color: red;
}
div:nth-of-type(2) {
background-color: green;
left:25%;
}
div:nth-of-type(3) {
background-color: blue;
left:50%;
}
#chip {
background-color: black;
width:50px;
height:50px;
}
.begin {
position:absolute;
left: 150px;
top: 150px;
}
Search WWH ::
Custom Search