Drag and Drop is a very common feature and it is mostly used in games and wherever needed.
<html>
<head> <title> Drag And Drop </title> </head>
<body>
<style>
#dropDiv {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
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));
}
function allowDrop(ev)
{
ev.preventDefault();
}
</script>
<img src="logo.jpg" id="image1" draggable="true" width="336" height="69" ondragstart="drag(event)">
</body>
</html>
Not a very complex thing to understand, there are few methods which we need to understand :
Set the object draggable property true.
draggable="true"
dataTransfer.setData() sets the datatype of an object and value of an object.
preventDefault() to prevent the browser default handling of the data (default is open as link on drop).
Append the dragged element into the drop element.
<html>
<head> <title> Drag And Drop </title> </head>
<body>
<style>
#dropDiv {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
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));
}
function allowDrop(ev)
{
ev.preventDefault();
}
</script>
<div id="dropDiv" bgcolor="0x000000" ondrop="drop(event)"
ondragover="allowDrop(event)"> </div>
</body>
</html>
Not a very complex thing to understand, there are few methods which we need to understand :
Set the object draggable property true.
draggable="true"
dataTransfer.setData() sets the datatype of an object and value of an object.
preventDefault() to prevent the browser default handling of the data (default is open as link on drop).
Append the dragged element into the drop element.
No comments:
Post a Comment