I am trying to make a feature of my website where there are multiple pictures and you have to drag an icon ( Turtle ) into a box. I managed to find some codes for what happen if you drag the correct icon.
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));
window.location.assign("homepage.html");
}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="turtle.ico" draggable="true" ondragstart="drag(event)"
width="100" height="100">
<img draggable="true" width="100" height="100" src="fish.ico">
I am now having trouble of writing the code for what happen if you drag the wrong icon (fish.ico) . I am planning for it to have a prompt, saying "Try again" but can't find out how to do it. Can someone help me create of function to do that?
If you have a proper id setup per image you can check if the data in the drop event is turtle.
See below.
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 (data !== "turtle") {
alert("Try again!");
return;
}
var img = document.getElementById(data);
ev.target.appendChild(img);
}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
drop here
</div>
<img id="turtle" src="turtle.ico" draggable="true" ondragstart="drag(event)" width="100" height="100" />
<img id="fish" src="fish.ico" draggable="true" ondragstart="drag(event)" width="100" height="100" />
Related
HTML code
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ontouchend="drop(event)" ontouchmove="allowDrop(event)" style="display: block;"></div><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" ontouchend="drop(event)" ontouchmove="allowDrop(event)" style="display: block;"><p id="0" draggable="true" ondragstart="drag(event)" ontouchstart="drag(event)">Lisbon</p></div><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" ontouchend="drop(event)" ontouchmove="allowDrop(event)" style="display: block;"><p id="1" draggable="true" ondragstart="drag(event)" ontouchstart="drag(event)">Stuttgart</p></div><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" ontouchend="drop(event)" ontouchmove="allowDrop(event)" style="display: block;"><p id="2" draggable="true" ondragstart="drag(event)" ontouchstart="drag(event)">Warsaw</p></div><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" ontouchend="drop(event)" ontouchmove="allowDrop(event)" style="display: block;"><p id="3" draggable="true" ondragstart="drag(event)" ontouchstart="drag(event)">Linz</p></div>
Javascript code
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
if (ev.type === "touchstart") {
var touch = ev.targetTouches[0];
ev.dataTransfer.setData("text", touch.target.id);
} else {
ev.dataTransfer.setData("text", ev.target.id);
}
}
function drop(ev) {
ev.preventDefault();
if (ev.target.tagName == "P") {
return;
}
var data = ev.dataTransfer.getData("text");
var draggable = document.getElementById(data);
if (ev.type === "touchend") {
var rect = ev.target.getBoundingClientRect();
var x = ev.changedTouches[0].clientX - rect.left;
var y = ev.changedTouches[0].clientY - rect.top;
var element = document.elementFromPoint(x, y);
if (element && element.classList.contains("droppable")) {
element.appendChild(draggable);
}
} else {
ev.target.appendChild(draggable);
}
}
why it throws this error
Uncaught TypeError: Cannot read properties of undefined (reading 'setData')
at drag (quiz.js:129:25)
at HTMLParagraphElement.ontouchstart (quiz.php:1:1)
I have the following script that I put together with part of another, what I need is to change the images by dragging the red heart to the blue one, the blue takes the place of the red and vice versa.
Today the trawler wipes out the old ones.
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag2"
src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/256/Heart-red-icon.png"
draggable="true" ondragstart="drag(event)" width="50px">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag1"
src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/256/Heart-blue-icon.png"
draggable="true" ondragstart="drag(event)" width="50px">
</div>
Javascript:
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 allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var id = ev.dataTransfer.getData("text");
var element = document.getElementById(id)
var div = document.getElementById(id).parentNode;
var clonedHeart = document.getElementById(ev.target.id).cloneNode(true);
ev.target.parentNode.insertBefore(element, ev.target.id.nextSibling)
document.getElementById(ev.target.id).remove();
div.appendChild(clonedHeart);
ev.dataTransfer.clearData();
}
I hope this help you.
I am trying to drag an element and drop it in the textbox. However It is not working.I am not sure where I am doing wrong.
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.textContent);
}
function drop(ev) {
var data = ev.dataTransfer.getData("Text");
var li = document.createElement("li");
li.innerHTML = data;
console.log(li);
// var data=document.createElement('p');
// data.innerHTML=ev.dataTransfer.getData("Text");
// console.log(data);
// console.log(typeof(data));
// ev.target.appendChild(document.getElementById(li));
ev.target.appendChild((li));
ev.preventDefault();
}
<span> <textarea name="name" rows="2" cols="37" ondrop="drop(event)" ondragover="allowDrop(event)" id="target1"></textarea> </span>
<div draggable="true" ondragstart="drag(event)" id="source">Sencha</div>
It seems like what you actually want to do is add the dragged text to the text input, instead of creating a new <li> element and then trying to add that to the text area. That would work if you were adding it to a <div>, for example, but you can't put HTML inside text inputs.
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.textContent);
}
function drop(ev) {
var data = ev.dataTransfer.getData("Text");
ev.target.innerHTML+=data;
ev.preventDefault();
}
<span> <textarea name="name" rows="2" cols="37" ondrop="drop(event)" ondragover="allowDrop(event)" id="target1"></textarea> </span>
<div draggable="true" ondragstart="drag(event)" id="source">Sencha</div>
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
For example:
<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>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="x" src="X.png" draggable="true" ondragstart="drag(event)" width="75" height="75" />
I want to drag the x.png file and drop it into the div, but x.png will move into the div if I do so. How can I achieve that, after I drag and drop, the div gets a x.png, and the original x.png is still where it was?
You can do that by duplicating the required DOM element by using cloneNode(true) method
<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).cloneNode(true));
ev.preventDefault();
}
</script>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="x" src="X.png" draggable="true"
ondragstart="drag(event)" width="75" height="75" />
I will stick to the example shown here: http://www.w3schools.com/html/html5_draganddrop.asp
Assuming we have this document:
<!DOCTYPE HTML>
<html>
<head>
<script>
<!-- script comes in the text below -->
</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">
</body>
</html>
Normal Drag & Drop
Normal drag and drop has such functions assigned to the respective elements:
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));
}
Drag & Copy
Whereas you'll have to alter the drop function so that it copies the DOM element instead of moving it.
//other functions stay the same
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
}
Try this page: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
And then append a .cloneNode(true) to getElementById(data).
You could even do things like in file managers: Ctrl-Key switches from moving to copying:
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
if (ev.ctrlKey)
ev.target.appendChild(document.getElementById(data).cloneNode(true));
else
ev.target.appendChild(document.getElementById(data));
}