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
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>
The result i want from the the below code is:
1. There are three text: Drag me!, Drag me2!, Drag me3!
2. One of the text will be drag to the last empty box
3. demo2 will display the text of the drop text
But what i have done will only display the "Drag me3!"
How can I done the 1, 2 & 3 by using if...else statement?
function dragStart(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
document.getElementById("demo").innerHTML = "Started to drag the p element";
}
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
document.getElementById("demo").innerHTML = "The p element was dropped";
var x = document.getElementById("dragtarget1").textContent;
var y = document.getElementById("dragtarget2").textContent;
var z = document.getElementById("dragtarget3").textContent;
document.getElementById("demo2").innerHTML = x;
document.getElementById("demo2").innerHTML = y;
document.getElementById("demo2").innerHTML = z;
}
.droptarget {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" draggable="true" id="dragtarget1">Drag me!</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" draggable="true" id="dragtarget2">Drag me2!</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" draggable="true" id="dragtarget3">Drag me3!</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p style="clear:both;"><strong>Note:</strong> drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.</p>
<p id="demo"></p>
<p id="demo2"></p>
The reason why you are seeing the behavior that you listed above is because of your line of code var x = document.getElementById("dragtarget").textContent;. What this code is doing is getting the text context of the element with that specific ID (dragtarget) and setting it to the inner HTML content of the id=demo2 every time. Instead of searching for a specific element with a specific ID, you need to use a more dynamic solution that looks in the event object received by the drop() function to determine what text to set in the demo2 element.
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 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
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