<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 200px;
padding: 10px;
border: 1px solid #aaaaaa;
}
p{
cursor:pointer;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
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 ChangeColor(id){
document.getElementById(id).style.color = "red";
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<p id="drag1" onclick="ChangeColor('drag1')" draggable="true" ondragstart="drag(event)" width="336" height="69"><b>one</b></p>
<p id="drag2" onclick="ChangeColor('drag2')" draggable="true" ondragstart="drag(event)" width="336" height="69"><b>two</b></p>
<p id="drag3" onclick="ChangeColor('drag3')" draggable="true" ondragstart="drag(event)" width="336" height="69"><b>three</b></p>
<p id="drag4" onclick="ChangeColor('drag4')" draggable="true" ondragstart="drag(event)" width="336" height="69"><b>four</b></p>
</body>
</html>
How to drag and drop multiple elements by selecting at once.
Just like in my code, when i will click on each tags it will change color to red. whoever is selected they are red color.
There are total 4 tags
suppose i choosed 3 ptags by clicking and the marked red after clicking.
I wants to drag and drop all marked three elements to div (drop zone).
same will apply for 2 tags selected for.
Is there any way to achieve that ?
Please have a look
Related
I am to drag and drop elements to the target div and also without removing it from the source div
Using below code drag and drop works fine but I was trying to retain the element in the source div without deleting it
HTML:
<html>
<head>
</head>
<body>
<p>Drag the elements image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="drag1" draggable="true" ondragstart="drag(event)" width="336" height="69">Input</div>
<div id="drag2" draggable="true" ondragstart="drag(event)" width="336" height="69">Radio</div>
<div id="drag3" draggable="true" ondragstart="drag(event)" width="336" height="69">Checkbox</div>
<div id="drag4" draggable="true" ondragstart="drag(event)" width="336" height="69">Dropdown</div>
</div>
<br>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
</body>
</html>
JS:
function allowDrop(ev) {
ev.preventDefault();
}
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));
}
CSS:
#div1, #div2 {
width: 350px;
height: 100px;
padding: 10px;
border: 1px solid #aaaaaa;
}
#drag1,#drag2,#drag3,#drag4{
border:1px solid black;
margin:5px;
}
Quite old question, just in case it helps someone:
You can actually close the html in the dataTransfer.
Eg:
function dropClone(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
}
Use the cloneNode to clone the source.
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
if (ev.target.hasChildNodes()) {
alert("This already contains a image");
}
else
{
ev.target.appendChild(document.getElementById(data));
}
}
<!DOCTYPE html>
<html>
<head>
<title>PUZZLE</title>
<link rel="stylesheet" href="puzzletest.css">
<script type="text/javascript" src="puzzletest.js"></script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag2" src="puzzle12.jpeg" draggable="true" ondragstart="drag(event)" width="336" height="69">
</div>
<img id="drag1" src="puzzle01.jpeg" draggable="true"ondragstart="drag(event)" width="336" height="69">
</body>
</html>
Current HTML
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag2" src="puzzle12.jpeg" draggable="true" ondragstart="drag(event)" width="336" height="69">
</div>
<img id="drag1" src="puzzle01.jpeg" draggable="true" ondragstart="drag(event)" width="336" height="69">
How can I check if the division already contains an image and if it does it should replace the image with the draggable image or print an alert?
As you can see if I put one Image to the other one disappears try it out
The problem is withev.target.hasChildNodes() - the target is the #drag2 but you need the div, so use currentTarget instead.
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
if (ev.currentTarget.hasChildNodes()) {
alert("This already contains a image");
}
else
{
ev.target.appendChild(document.getElementById(data));
}
}
<!DOCTYPE html>
<html>
<head>
<title>PUZZLE</title>
<link rel="stylesheet" href="puzzletest.css">
<script type="text/javascript" src="puzzletest.js"></script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag2" src="puzzle12.jpeg" draggable="true" ondragstart="drag(event)" width="336" height="69">
</div>
<img id="drag1" src="puzzle01.jpeg" draggable="true"ondragstart="drag(event)" width="336" height="69">
</body>
</html>
Anyone can help me solve the issue, Thanks for helping !!
Updated using this jsfiddle:
Code:
<!DOCTYPE HTML>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var new_img = $('#'+data).clone();
$('#'+ev.target.id).html(new_img);
}
</script>
<body>
<center>
<p>Drag the image you want into this box!</p>
<table>
<tr>
<td><p><b>Main Image</b></p><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><p><b>Image 2</b></p><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
<td><p><b>Image 3</b></p><div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
</tr>
</table>
<img id="drag1" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)" src="http://netdna.webdesignerdepot.com/uploads/2013/02/thumbnail32.jpg" alt="img01"/></a>
<img id="drag2" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)" src="http://netdna.webdesignerdepot.com/uploads/html5-css3-wireframing/html5-logo.jpg" alt="img02"/></a>
<img id="drag3" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)"src="http://netdna.webdesignerdepot.com/uploads/2012/12/thumb-1.jpg" alt="img03"/></a>
</body>
<style type="text/css">
#div1 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;}
#div2 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;}
#div3 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;}
</style>
Using the code above, the original image retain. but issue is if i drag another picture in a box that already got image, it won't overwrite.
function allowDrop(ev)
{
ev.preventDefault();
$('#'+ev.target.id).html("");
}
Jsfiddle
Check the fiddle... but the problem arises when you drop over the image.
You will have to drop over the empty space between the image added and the border.
As the image added does not have "ondrop" attribute assigned.
function drop(ev)
{
ev.preventDefault();
document.getElementById(ev.target.id).innerHTML = "";
var data=ev.dataTransfer.getData("Text");
var new_img = $('#'+data).clone();
$('#'+ev.target.id).html(new_img);
}
However, if you clear the innerHTML in allowDrop, it will cause the droppable to be cleared even if the user does not actually drop the image in the area.
Check this
The idea is like this:
You hear a sound then you have to drag and drop the right image into the box. I want to use this to teach my daughter about animals, and for myself, I want to learn more about these features.
I really hope someone can help me out. Much thanks for your time.
Here is the code:
<html>
<head>
<style type="text/css">
#div1 {width:200px;height:158px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
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));
}
</script>
</head>
<body>
<p>Jamila sleep het juiste diertje naar de vierkant</p>
<audio????
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="eend.jpg" draggable="true" ondragstart="drag(event)" width="200" height="158">
<img id="drag2" src="tigr.jpg" draggable="true" ondragstart="drag(event)" width="200" height="158">
Yours sincerly,
Orhan
I am using the following code to drag images into an area of the screen. I want to know, is there a code that I can use to send the image back to its original location, or at least back to its original div. I need to do this, because after a certain time (lets just say 100s) I need a particular image to go back. So lets say I drag both images into the area, after 100s I want the first image back to its original location
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
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));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
<img id="drag2" src="img_logo2.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>