Here, I have implemented a simple drag and drop in
action. J
. I’ll define a draggable
image that can be dropped into a circle.
The Complete source code ::
<!DOCTYPE
html>
<html lang="en">
<head>
<title>Basic drag and drop example</title>
<style>
.drop-div {
width: 150px;
height: 150px;
border: 3px dashed #224163;
background-color: #AABACC;
margin-top: 15px;
border-radius: 80px;
text-align: center;
}
[draggable=true] {
-khtml-user-drag: element;
-webkit-user-drag: element;
-khtml-user-select: none;
-webkit-user-select: none;
cursor: pointer;
margin-top: 50px;
}
</style>
<script>
function dragStartHandler(event) {
event.dataTransfer.setData('Text', 'text');
}
function dropHandler(event) {
preventDefaults(event);
if
(!event.target) {
event.target = event.srcElement
}
event.target.appendChild(document.getElementById('draggable-img'));
}
function dragOverHandler(event) {
preventDefaults(event);
}
function preventDefaults(event) {
if
(event.preventDefault) {
event.preventDefault();
}
try {
event.returnValue = false;
}
catch (exception) {}
}
</script>
</head>
<body>
<img draggable="true"
ondragstart="dragStartHandler(event);"
class="draggable-img"
id="draggable-img"
src="C:\Users\Dipayan\Desktop\ball.png "/>
<div class="drop-div"
ondragover="dragOverHandler(event);"
ondrop="dropHandler(event)"
id="drop-div"></div>
</body>
</html>
What
It Looks Like
You
can then click on the red ball , drag the ball to inside the circle, and drop
it to produce this:
