I want some interaction on my game. Currently, I can drag them over the recycle bin and then they stay there. I would like them to disappear and leave a message that says, Yes, you are correct or good recycling. How do I do this? I'm just learning javascript, so I need simple.
Here is the code I have so far.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body {
}
#div1 {
width:478px;
height:331px;
padding:10px;
background-image:url(../Images/recycle_bin.png);
background-repeat:no-repeat;
vertical-align:middle;
margin:auto;
text-align:center;
position:absolute;
left:40%;
}
*[draggable=true] {
-moz-user-select:none;
-khtml-user-drag: element;
cursor: move;
}
.instructions {
font-family:Arial, Helvetica, sans-serif;
font-size:19px;
color:#255e02;
font-weight:bold;
line-height:12px;
}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<div class="instructions">
<p>This is Ms. Mumford's Recycle Game. You will learn about recycling. Some items on this page cannot be recycled. Others can. </p>
<p>Drag the things that you can recycle to the recycle bin.</p>
</div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div>
<img id="drag1" src="../Images/Mountaindew.png" draggable="true" ondragstart="drag(event)" />
<img id="drag2" src="../Images/snapple.png" draggable="true" ondragstart="drag(event)" />
<img id="drag3" src="../Images/newspaper.png" draggable="true" ondragstart="drag(event)" />
</div>
</body>
</html>
Just add
//using jQuery to empty the div, or document.getElementById("div1").innerHTML=""
$("#div1").empty();
//alert, or add your own popup
alert("Yes, you are correct or good recycling.");
at the end of drop(), like this:
function drop(ev){
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
document.getElementById("div1").innerHTML="";
alert("Yes, you are correct or good recycling.");
}
LIVE Demo: http://jsfiddle.net/DerekL/Nb3An/
(fullscreen) http://jsfiddle.net/DerekL/Nb3An/show
Related
I have image that I want to drag and drop infinitely.From first box to second box when I move,image disappear from first box.Not to lose image created same image on first box again using .appendchild(img) method.I want to drag image from initial position,not from where I dropped.So I changed draggable property as false when I dropped image into box.It creates image on first box,there's no problem.But I can't drag and drop it from first box to third again because that image has no event properties.I want to give them those properties again and it should be repeated because I want to do it forever.
Here's what I tried
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2,#div3 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</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));
var img = document.createElement("img");
img.src = "https://mikasasports.com/wp-content/uploads/2015/04/MVA2001.png";
var src = document.getElementById("div1");
img.style.width="88px";
img.style.height="31px";
src.appendChild(img);
drag1.draggable=false;
}
</script>
</head>
<body>
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the three div elements.</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="https://mikasasports.com/wp-content/uploads/2015/04/MVA2001.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
I'm doing a Drag and Drop project where when dropping an image in another Div, it has to stay in the same place where I left it.
The problem is the img are lining up the left.
HTML CODE :
<html>
<head>
<link type="text/css" rel="stylesheet" media="screen" href="css/testednd.css" /> <!-- CSS das div's -->
<script src="js/testednd.js"></script> <!-- Script clickImagem -->
</head>
<body>
<div id="conteudo-left" style="position:static; left:10px; top:20px; width:300; height:660; z-index:-1; overflow: auto">
<form name="form_dnd_left" border = 1>
<ul>
<li><img id="drag1" src="images/Comp3.jpg" draggable="true" ondragstart="drag(event)" alt="" /></li>
</ul>
</form>
</div>
<div class="conteudo" id="conteudo" ondrop="drop(event)" ondragover="allowDrop(event)"><!-- abrimos a div conteudo do meio-->
</div>
</body>
</html>
CSS CODE
#conteudo-left{
width:300px;
height:660px;
float:left;
background-color:#FFF;
}
#conteudo{
width:600px;
height:460px;
float:left;
background-color:#ff1;
display: initial;
margin: auto;
.columns {
}
}
JavaScript Code
///Drag'n Drop functions
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
ev.dataTransfer.effectAllowed = "copy";
}
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var copyimg = document.createElement("img");
var original = document.getElementById(data);
copyimg.src = original.src;
ev.target.appendChild(copyimg);
}
Can somebody help me??
Thanks for all !!
Update:
From the event you can get the position of the drag and minus the offset of the parent, thus we can drop it in that exact location.
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var copyimg = document.createElement("img");
var parent = document.createElement("conteudo");
var original = document.getElementById(data);
copyimg.src = original.src;
copyimg.style.position = "absolute";
copyimg.style.left = ev.clientX - ev.target.offsetLeft+"px";
copyimg.style.top = ev.clientY - ev.target.offsetTop+"px";
ev.target.appendChild(copyimg);
}
Old Answer:
Do you want something like this?
CSS used to make this is:
padding-left: 150px;
padding-top: 125px;
box-sizing: border-box;
So I gave half of the width and height as padding so that the images get positioned there! also I am using box-sizing:border-box so that the padding does not get added to the dimensions of the div.
Note: I have reduced the dimesions of the boxes so that they fit perfectly inside the demo window, please set the padding-top andpadding-left` to about half of the width of the respective dimensions!
///Drag'n Drop functions
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
ev.dataTransfer.effectAllowed = "copy";
}
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var copyimg = document.createElement("img");
var parent = document.createElement("conteudo");
var original = document.getElementById(data);
copyimg.src = original.src;
copyimg.style.position = "absolute";
copyimg.style.left = ev.clientX - ev.target.offsetLeft+"px";
copyimg.style.top = ev.clientY - ev.target.offsetTop+"px";
ev.target.appendChild(copyimg);
}
#conteudo-left{
width:150px;
height:330px;
float:left;
background-color:#FFF;
}
#conteudo{
width:300px;
height:250px;
position:relative;
float:left;
background-color:#ff1;
display: initial;
margin: auto;
}
<html>
<head>
<link type="text/css" rel="stylesheet" media="screen" href="css/testednd.css" /> <!-- CSS das div's -->
<script src="js/testednd.js"></script> <!-- Script clickImagem -->
</head>
<body>
<div id="conteudo-left" style="position:static; left:10px; top:20px; width:300; height:660; z-index:-1; overflow: auto">
<form name="form_dnd_left" border = 1>
<ul>
<li><img id="drag1" src="http://via.placeholder.com/50x50" draggable="true" ondragstart="drag(event)" alt="asdfasdf" /></li>
</ul>
</form>
</div>
<div class="conteudo" id="conteudo" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</body>
</html>
On the drop event you get the x and y coords of the mouse and set the style to be absolute in that position. Note that the top left corner of the image will snap to the exact coord of the mouse pointer. See below:
///Drag'n Drop functions
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
ev.dataTransfer.effectAllowed = "copy";
}
function drop(ev)
{
ev.preventDefault();
var x = ev.clientX;
var y = ev.clientY;
var data = ev.dataTransfer.getData("text");
var copyimg = document.createElement("img");
var original = document.getElementById(data);
copyimg.src = original.src;
ev.target.appendChild(copyimg);
copyimg.setAttribute("style", "position: absolute; top: "+y+"px; left:"+x+"px;");
}
#conteudo-left{
width:150px;
height:330px;
float:left;
background-color:#FFF;
}
#conteudo{
width:300px;
height:250px;
float:left;
background-color:#ff1;
display: initial;
margin: auto;
box-sizing: border-box;
}
<html>
<head>
<link type="text/css" rel="stylesheet" media="screen" href="css/testednd.css" /> <!-- CSS das div's -->
<script src="js/testednd.js"></script> <!-- Script clickImagem -->
</head>
<body>
<div id="conteudo-left" style="position:static; left:10px; top:20px; width:300; height:660; z-index:-1; overflow: auto">
<form name="form_dnd_left" border = 1>
<ul>
<li><img id="drag1" src="http://via.placeholder.com/50x50" draggable="true" ondragstart="drag(event)" alt="asdfasdf" /></li>
</ul>
</form>
</div>
<div class="conteudo" id="conteudo" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</body>
</html>
I would like to know how to show what Row and Column that a cloned image is in. For example if I want the drag the image to Row 1 Column 5, on dropping it there is it possible to have Row 1 Column 5 values be inputted into a memory array?
Also is it possible to drop the image in Row 1 Column 5 and set this as the state 'on' which would be inputted into a memory array?
<style>
#div1 {position:absolute;width:100px;height:25px;top:150px;left:200px;padding:0px;border:1px solid #aaaaaa;border-color: white white white black;}
#div2 {position:absolute;width:100px;height:25px;top:150px;left:300px;padding:0px;border:1px solid #aaaaaa;border-color: white white white white;}
#div3 {position:absolute;width:100px;height:25px;top:150px;left:400px;padding:0px;border:1px solid #aaaaaa;border-color: white white white white;}
#div4 {position:absolute;width:100px;height:25px;top:150px;left:500px;padding:0px;border:1px solid #000000;border-color: white white white white;}
#div5 {position:absolute;width:100px;height:25px;top:150px;left:600px;padding:0px;border:1px solid #000000;border-color: white white white white;}
#div6 {position:absolute;width:100px;height:25px;top:150px;left:700px;padding:0px;border:1px solid #aaaaaa;border-color: white white white white;}
#div7 {position:absolute;width:100px;height:25px;top:150px;left:800px;padding:0px;border:1px solid #aaaaaa;border-color: white black white white;
</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).cloneNode(true));}
</script>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)" ></div
</body>
<img id="drag1" src="bat.png" draggable="true" ondragstart="drag(event)" width="100" height="25" align="center">
<img id="drag2" src="ball.png" draggable="true" ondragstart="drag(event)" width="100" height="25" align="center">
I think i need a bit more specific information but, this should get you in the right direction:
Basically on the drop function, you want to push your target values (in this case the div1, div2 etc) divs into an array as objects
var memoryArray = [];
function drop(ev) {
var _target = ev.target;
var targetId = _target.getAttribute('id');
var elem = document.getElementById(targetId)
setTimeout(function(){
var imgSrc = elem.getElementsByTagName('img')[0].src;
var object = {
id:elem.id ,
image: imgSrc
}
memoryArray.push(object)
console.log(memoryArray)
}, 20)
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
}
There are many ways to achieve this, this is just one.
Here is a fiddle
I am making an exercise in which text id drag from div(contain words) then drop them into text-fields (these are 3)..Each field has its own text to be placed .. I have already drag and drop the text but cant able to compare them for particular fields .. Please help me.. Here is my code :
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
#div2 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
#div3 {width:350px;height:70px;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>
verbs
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
noun
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
adjetives
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="drag1" draggable="true" ondragstart="drag(event)">I play the guitar</div>
<div id="drag2" draggable="true" ondragstart="drag(event)">The piano is black</div>
</body>
</html>
There are a couple of things you need to change here.
You need to drag words and not sentences
<div id="drag1">I
<span id="play" draggable="true" ondragstart="drag(event)"><b>play</b></span> the
<span id="guitar" draggable="true" ondragstart="drag(event)"><b>guitar</b></span>
</div>
There should be some list containing the allowed words for each type
var nouns = ['guitar'];
var verbs = ['play'];
Finally there should be a condition during drop event
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
if(ev.target.id =='verb' && verbs.indexOf(data) != -1){
ev.target.appendChild(document.getElementById(data));
}
else{
alert(data + ' is not a ' + ev.target.id +'. Try again');
}
}
Here is a demo for a single sentence
I tried swapping two elements inside div1 and div2 tag but only the first replace function executes properly the other element is not swapped
either one of the div is getting swapped at once but when i try to swap both at same time it doesn't happen please help me out
*
<head>
<style type="text/css">
#div1 {
width:350px;
height:70px;
padding:10px;
border:1px solid #aaaaaa;
}
#div2 {
width:350px;
height:70px;
padding:10px;
border:1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
var child = ev.target;
var parents = child.parentNode;
ev.dataTransfer.setData("child1", child.id);
ev.dataTransfer.setData("parent1", parents.id);
}
function drop(ev) {
ev.preventDefault();
var childid1 = ev.dataTransfer.getData("child1");
var parentid1 = ev.dataTransfer.getData("parent1");
var parent1 = document.getElementById(parentid1);
var c = ev.currentTarget.childNodes;
var childid2 = c[1].id;
parent1.replaceChild(c[1], document.getElementById(childid1));
var parent2 = ev.currentTarget;
parent2.removeChild(c[1]);
parent2.appendChild(document.getElementById(childid1));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</div>
<br>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag2" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="236" height="49">
</div>
</body>
I think your fundamental flaw is that you do not cater for the fact that when you do your first replaceChild, the image you are inserting is removed from its parent so it is no longer there to replace with the second image.
I found your variable names somewhat confusing, and have rewritten your code in a simpler fashion as follows:
function allowDrop (ev) {
ev.preventDefault ();
}
function drag (ev) {
ev.dataTransfer.setData ("src", ev.target.id);
}
function drop (ev) {
ev.preventDefault ();
var src = document.getElementById (ev.dataTransfer.getData ("src"));
var srcParent = src.parentNode;
var tgt = ev.currentTarget.firstElementChild;
ev.currentTarget.replaceChild (src, tgt);
srcParent.appendChild (tgt);
}
You can test this code at jsFiddle