I explain about drag and drop in JavasScript,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#target
{
margin-top:40px;
margin-left:600px;
width:200px;
height:200px;
border:1px solid #999;
}
</style>
</head>
<body>
<div id="target" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<img src="img/download.jpg" width="170px" height="170x" id="dragItem" draggable="true" ondragstart="drag(event)"/>
<scrript>
function drag(a)
{
a.dataTransfer.setData("Text",a.target.id);
}
function allowDrop(a)
{
a.preventDefault();
}
function drop(a)
{
a.preventDefault();
dragItem=a.dataTransfer.getData("Text");
a.target.appendChild(document.getElementById('dragItem'));
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#target
{
margin-top:40px;
margin-left:600px;
width:200px;
height:200px;
border:1px solid #999;
}
</style>
</head>
<body>
<div id="target" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<img src="img/download.jpg" width="170px" height="170x" id="dragItem" draggable="true" ondragstart="drag(event)"/>
<scrript>
function drag(a)
{
a.dataTransfer.setData("Text",a.target.id);
}
function allowDrop(a)
{
a.preventDefault();
}
function drop(a)
{
a.preventDefault();
dragItem=a.dataTransfer.getData("Text");
a.target.appendChild(document.getElementById('dragItem'));
}
</script>
</body>
</html>
Posts
0 comments:
Post a Comment