Picture Drag and Drop — Javascript

Continuing from our previous post at the following link where we implemented a drag and drop on a paragraph element.

In this post we will drag and drop an image.

It is easy. Just replace the <p></p> element with an <img /> tag.

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<title>Drag & Drop Demo 1</title>
<script>
function addStep(data)
{
var x=document.getElementById("txtSteps");
x.value=x.value + data + "\n";
}
function allowDrop(ev)
{
ev.preventDefault();
addStep("allowDrop " + ev);
}
function doDrag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
addStep("Drag " + ev)
}
function doDrop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var value=document.getElementById(data);
ev.target.appendChild(value);
addStep("Drop " + ev);
}
</script>
</head>
<body>
<h2>Drag and Drop Demo</h2>
<textarea id="txtSteps" class="w3-input" style="height: 150px;">
</textarea>
<br/>
<div id="dDropTarget"  class="w3-amber w3-border w3-padding "  ondrop="doDrop(event)" ondragover="allowDrop(event)">
<h3>Drop Here</h3>
</div><br/><br/><div class="w3-pink w3-border w3-padding" >
<h3>&nbsp;</h3>
<img id="dDragTarget"  class="w3-card w3-green" src="pic.png" draggable="true" ondragstart="doDrag(event)">
Drag Me
</div>
</body>
</html>

This is the image that will be dragged.

You can see the demo here.

Picture Drag 1

To develop our understanding further let us analyze the value object that is being dragged and appended to the div.

var value=document.getElementById(data);
ev.target.appendChild(value);

I will change the code slightly at this point and display the value object and its src property in the textarea.

The relevant code is highlighted.

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<title>Drag & Drop Demo 1</title>
<script>
function addStep(data)
{
var x=document.getElementById("txtSteps");
x.value=x.value + data + "\n";
}
function allowDrop(ev)
{
ev.preventDefault();
addStep("allowDrop " + ev);
}
function doDrag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
addStep("Drag " + ev)
}
function doDrop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var value=document.getElementById(data);
 //ev.target.appendChild(value);
 addStep("Drop " + ev);
 addStep("Dragged object is " + value);
 addStep("Image src is " + value.src);
}
</script>
</head>
<body>
<h2>Drag and Drop Demo</h2><textarea id="txtSteps" class="w3-input" style="height: 150px;">
</textarea>
<br/>
<div id="dDropTarget"  class="w3-amber w3-border w3-padding "  ondrop="doDrop(event)" ondragover="allowDrop(event)">
<h3>Drop Here</h3>
</div>
<br/><br/>
<div class="w3-pink w3-border w3-padding" >
<h3>&nbsp;</h3>
<img id="dDragTarget"  class="w3-card w3-green" src="pic.png" draggable="true" ondragstart="doDrag(event)">
Drag Me
</div>
</body>
</html>

Check this link.

The output when you drag and drop the image.

The dragged object is shown as  [object HTMLImageElement]
and the
Image src is http://hypatiasoftwaresolutions.in/dragdrop/pic.png

How can we use this. Put an image in the upper div, and replace it with the dragged image.

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<title>Drag & Drop Demo 1</title>
<script>
function addStep(data)
{
var x=document.getElementById("txtSteps");
x.value=x.value + data + "\n";
}
function allowDrop(ev)
{
ev.preventDefault();
addStep("allowDrop " + ev);
}
function doDrag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
addStep("Drag " + ev);
}
function doDrop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var value=document.getElementById(data);
addStep("Drop " + ev);
addStep("Dragged object is " + value);
addStep("Image src is " + value.src);
var x= ev.target.src;
ev.target.src=value.src;
value.src=x;
}
</script>
</head>
<body>
<h2>Drag and Drop Demo</h2>
<textarea id="txtSteps" class="w3-input" style="height: 150px;">
</textarea>
<br/>
<div id="dDropTarget"  class="w3-amber w3-border w3-padding "  ondrop="doDrop(event)" ondragover="allowDrop(event)">
<h3>Drop Here</h3>
img src="flip.png" id="d"/></div><br/><br/>
<div class="w3-pink w3-border w3-padding" >
<h3>&nbsp;</h3>
<img id="dDragTarget"  class="w3-card w3-green" src="pic.png" draggable="true" ondragstart="doDrag(event)">
Drag Me
</div>
</body>
</html>

Check the output here.
Picture Interchange

Leave a Reply