I have 2 droppable divs called drop1 and drop2, and 2 draggable elements called ans1 and ans2. I want to make an alert when ans1 is inside drop1 and ans2 is inside drop2. Both conditions have to be fulfilled (not caring about which is fulfilled first) in order for the alert to come out.
$("#ans1, #ans2").draggable({
revert: "valid",
cursor: "move"
});
$("#drop1, #drop2").droppable({
drop: function (event, ui) {
if ($("#ans1", $("#drop1")) && $("#ans2", $(".drop2"))) {
alert("correct");
}
});
<div id="drop1" class="b1" style="background-color: white; border: solid; height: 6vw; width: 13vw; border-radius: 7px">
</div>
<div id="drop2" class="b1" style="background-color: white; border: solid; height: 6vw; width: 13vw; border-radius: 7px">
</div>
<div id="ans2" style="background-color: white; border: solid; cursor: move; height: 6vw; width: 13vw; border-radius: 7px">
a change
</div>
<br/>
<div id="ans1" style="background-color: white; border: solid; cursor: move; height: 6vw; width: 13vw; border-radius: 7px">
chemical reaction system
</div>
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
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));
}
</script>
</head>
<body>
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="https://www.google.co.in/logos/doodles/2018/sergei-eisensteins-120th-birthday-5380775741489152.2-s.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
Try to use accept option and ui.draggable.text() of the droppable() function
Stack Snippet
$(".drag-div>div").draggable({
revert: "invalid",
cursor: "move"
})
$(".drop-div>div").droppable({
accept: ".drag-div>div",
drop: function(event, ui) {
$(this).text(ui.draggable.text());
if ($("#drop1").text() == $("#ans1").text() && $("#drop2").text() == $("#ans2").text()) {
alert("correct");
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="drop-div">
<div id="drop1" class="b1" style="background-color: white; border: solid; height: 6vw; width: 13vw; border-radius: 7px">
</div>
<br/>
<div id="drop2" class="b1" style="background-color: white; border: solid; height: 6vw; width: 13vw; border-radius: 7px">
</div>
</div>
<br/>
<div class="drag-div">
<div id="ans2" style="background-color: white; border: solid; cursor: move; height: 6vw; width: 13vw; border-radius: 7px">
a change
</div>
<br/>
<div id="ans1" style="background-color: white; border: solid; cursor: move; height: 6vw; width: 13vw; border-radius: 7px">
chemical
</div>
</div>
Related
I am working on sort of a puzzle game which looks something like in the below mentioned images
When I Swap content (Drag and Drop) just on the elements of mainDiv1, it is working fine.
[Swapping within mainDiv1]
It also works in the way when I Drag and Drop the elements (images) from mainDiv1 to mainDiv2.
[mainDiv1 to mainDiv2 image drag and drop on different divs]
PROBLEM:
1. When I try to swap the elements in mainDiv2, it is not working. The element being dragged just disappears.
2. If I try to put these images back to the mainDiv1, I cannot do that too.
Can anyone please tell me where I am going wrong or if it is possible to call multiple functions on ondrag / ondrop.
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);
}
function drop1(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData("src");
ev.target.appendChild(document.getElementById(data));
}
#maindiv1
{
width: 48%;
height: fit-content;
background-color: #ffc7b1;
border: 1px solid;
float: left;
}
#div1
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: red;
}
#div2
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: orange;
}
#div3
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: yellow;
}
#div4
{
border: 1px solid;
width: 24.2%;
height: 200px;
float: left;
background-color: green;
}
#div5
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: blue;
}
#div6
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: violet;
}
#div7
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: indigo;
}
#div8
{
border: 1px solid;
width: 24.2%;
height: 200px;
float: left;
background-color: chocolate;
}
#div9
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: teal;
}
#div10
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: darkolivegreen;
}
#div11
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: salmon;
}
#div12
{
border: 1px solid;
width: 24.2%;
height: 200px;
float: left;
background-color: plum;
}
#img1
{
width: 100%;
height: 200px;
}
#img2
{
width: 100%;
height: 200px;
}
#img3
{
width: 100%;
height: 200px;
}
#img4
{
width: 100%;
height: 200px;
}
#img5
{
width: 100%;
height: 200px;
}
#img6
{
width: 100%;
height: 200px;
}
#img7
{
width: 100%;
height: 200px;
}
#img8
{
width: 100%;
height: 200px;
}
#img9
{
width: 100%;
height: 200px;
}
#img10
{
width: 100%;
height: 200px;
}
#img11
{
width: 100%;
height: 200px;
}
#img12
{
width: 100%;
height: 200px;
}
#separator
{
width: 2%;
height: 500px;
background-color: white;
float: left;
}
#maindiv2
{
width: 48%;
height: fit-content;
background-color: #ffc7b1;
border: 1px solid;
float: left;
}
#odiv1
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: red;
}
#odiv2
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: orange;
}
#odiv3
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: yellow;
}
#odiv4
{
border: 1px solid;
width: 24.2%;
height: 200px;
float: left;
background-color: green;
}
#odiv5
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: blue;
}
#odiv6
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: violet;
}
#odiv7
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: indigo;
}
#odiv8
{
border: 1px solid;
width: 24.2%;
height: 200px;
float: left;
background-color: chocolate;
}
#odiv9
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: teal;
}
#odiv10
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: darkolivegreen;
}
#odiv11
{
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: salmon;
}
#odiv12
{
border: 1px solid;
width: 24.2%;
height: 200px;
float: left;
background-color: plum;
}
<div id="maindiv1">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/1.gif" alt="Image not available" id="img1" ondragstart="drag(event)" draggable="true">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/2.gif" alt="Image not available" id="img2" ondragstart="drag(event)" draggable="true">
</div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/3.gif" alt="Image not available" id="img3" ondragstart="drag(event)" draggable="true">
</div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/4.gif" alt="Image not available" id="img4" ondragstart="drag(event)" draggable="true">
</div>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/5.gif" alt="Image not available" id="img5" ondragstart="drag(event)" draggable="true">
</div>
<div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/6.gif" alt="Image not available" id="img6" ondragstart="drag(event)" draggable="true">
</div>
<div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/7.gif" alt="Image not available" id="img7" ondragstart="drag(event)" draggable="true">
</div>
<div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/8.gif" alt="Image not available" id="img8" ondragstart="drag(event)" draggable="true">
</div>
<div id="div9" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/9.gif" alt="Image not available" id="img9" ondragstart="drag(event)" draggable="true">
</div>
<div id="div10" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/10.gif" alt="Image not available" id="img10" ondragstart="drag(event)" draggable="true">
</div>
<div id="div11" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/11.gif" alt="Image not available" id="img11" ondragstart="drag(event)" draggable="true">
</div>
<div id="div12" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/12.gif" alt="Image not available" id="img12" ondragstart="drag(event)" draggable="true">
</div>
</div>
<div id="separator"></div>
<div id="maindiv2">
<div id="odiv1" ondrop="drop1(event)" ondragover="allowDrop(event)">
</div>
<div id="odiv2" ondrop="drop1(event)" ondragover="allowDrop(event)">
</div>
<div id="odiv3" ondrop="drop1(event)" ondragover="allowDrop(event)">
</div>
<div id="odiv4" ondrop="drop1(event)" ondragover="allowDrop(event)">
</div>
<div id="odiv5" ondrop="drop1(event)" ondragover="allowDrop(event)">
</div>
<div id="odiv6" ondrop="drop1(event)" ondragover="allowDrop(event)">
</div>
<div id="odiv7" ondrop="drop1(event)" ondragover="allowDrop(event)">
</div>
<div id="odiv8" ondrop="drop1(event)" ondragover="allowDrop(event)">
</div>
<div id="odiv9" ondrop="drop1(event)" ondragover="allowDrop(event)">
</div>
<div id="odiv10" ondrop="drop1(event)" ondragover="allowDrop(event)">
</div>
<div id="odiv11" ondrop="drop1(event)" ondragover="allowDrop(event)">
</div>
<div id="odiv12" ondrop="drop1(event)" ondragover="allowDrop(event)">
</div>
</div>
tl;dr:
Merge drop and drop1 functions into one which handles both cases and apply it to all divs:
function drop(ev) {
ev.preventDefault();
var src = document.getElementById(ev.dataTransfer.getData("src"));
if (src) {
var tgt = ev.currentTarget.firstElementChild;
if (tgt) {
var srcParent = src.parentNode;
ev.currentTarget.replaceChild(src, tgt);
srcParent.appendChild(tgt);
} else {
ev.currentTarget.appendChild(src);
}
}
}
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"));
if (src) {
var tgt = ev.currentTarget.firstElementChild;
if (tgt) {
var srcParent = src.parentNode;
ev.currentTarget.replaceChild(src, tgt);
srcParent.appendChild(tgt);
} else {
ev.currentTarget.appendChild(src);
}
}
}
#maindiv1 {
width: 48%;
height: fit-content;
background-color: #ffc7b1;
border: 1px solid;
float: left;
}
#div1 {
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: red;
}
#div2 {
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: orange;
}
#div3 {
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: yellow;
}
#div4 {
border: 1px solid;
width: 24.2%;
height: 200px;
float: left;
background-color: green;
}
#div5 {
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: blue;
}
#div6 {
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: violet;
}
#div7 {
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: indigo;
}
#div8 {
border: 1px solid;
width: 24.2%;
height: 200px;
float: left;
background-color: chocolate;
}
#div9 {
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: teal;
}
#div10 {
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: darkolivegreen;
}
#div11 {
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: salmon;
}
#div12 {
border: 1px solid;
width: 24.2%;
height: 200px;
float: left;
background-color: plum;
}
#img1 {
width: 100%;
height: 200px;
}
#img2 {
width: 100%;
height: 200px;
}
#img3 {
width: 100%;
height: 200px;
}
#img4 {
width: 100%;
height: 200px;
}
#img5 {
width: 100%;
height: 200px;
}
#img6 {
width: 100%;
height: 200px;
}
#img7 {
width: 100%;
height: 200px;
}
#img8 {
width: 100%;
height: 200px;
}
#img9 {
width: 100%;
height: 200px;
}
#img10 {
width: 100%;
height: 200px;
}
#img11 {
width: 100%;
height: 200px;
}
#img12 {
width: 100%;
height: 200px;
}
#separator {
width: 2%;
height: 500px;
background-color: white;
float: left;
}
#maindiv2 {
width: 48%;
height: fit-content;
background-color: #ffc7b1;
border: 1px solid;
float: left;
}
#odiv1 {
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: red;
}
#odiv2 {
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: orange;
}
#odiv3 {
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: yellow;
}
#odiv4 {
border: 1px solid;
width: 24.2%;
height: 200px;
float: left;
background-color: green;
}
#odiv5 {
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: blue;
}
#odiv6 {
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: violet;
}
#odiv7 {
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: indigo;
}
#odiv8 {
border: 1px solid;
width: 24.2%;
height: 200px;
float: left;
background-color: chocolate;
}
#odiv9 {
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: teal;
}
#odiv10 {
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: darkolivegreen;
}
#odiv11 {
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
background-color: salmon;
}
#odiv12 {
border: 1px solid;
width: 24.2%;
height: 200px;
float: left;
background-color: plum;
}
<div id="maindiv1">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/1.gif" alt="Image not available" id="img1" ondragstart="drag(event)" draggable="true"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/2.gif" alt="Image not available" id="img2" ondragstart="drag(event)" draggable="true"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/3.gif" alt="Image not available" id="img3" ondragstart="drag(event)" draggable="true"></div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/4.gif" alt="Image not available" id="img4" ondragstart="drag(event)" draggable="true"></div>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/5.gif" alt="Image not available" id="img5" ondragstart="drag(event)" draggable="true"></div>
<div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/6.gif" alt="Image not available" id="img6" ondragstart="drag(event)" draggable="true"></div>
<div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/7.gif" alt="Image not available" id="img7" ondragstart="drag(event)" draggable="true"></div>
<div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/8.gif" alt="Image not available" id="img8" ondragstart="drag(event)" draggable="true"></div>
<div id="div9" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/9.gif" alt="Image not available" id="img9" ondragstart="drag(event)" draggable="true"></div>
<div id="div10" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/10.gif" alt="Image not available" id="img10" ondragstart="drag(event)" draggable="true"></div>
<div id="div11" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/11.gif" alt="Image not available" id="img11" ondragstart="drag(event)" draggable="true"></div>
<div id="div12" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="images/12.gif" alt="Image not available" id="img12" ondragstart="drag(event)" draggable="true"></div>
</div>
<div id="separator"></div>
<div id="maindiv2">
<div id="odiv1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="odiv2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="odiv3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="odiv4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="odiv5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="odiv6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="odiv7" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="odiv8" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="odiv9" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="odiv10" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="odiv11" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="odiv12" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
proper answer:
Whenever you find yourself writing the same line of code twice, you should try to find a way to only write it once.
Taking the CSS, for example, instead of writing each property for each child, using that child as a selector, you should consider writing it only once, using the parent as selector:
#maindiv1, #maindiv2 {
width: 48%;
height: fit-content;
background-color: #ffc7b1;
border: 1px solid;
float: left;
}
#maindiv1 > div, #maindiv2 > div {
border: 1px solid;
width: 24.9%;
height: 200px;
float: left;
}
#maindiv1 > div img {
width: 100%;
height: 200px;
}
#separator {
width: 2%;
height: 500px;
background-color: white;
float: left;
}
#div1, #odiv1 { background-color: red; }
#div2, #odiv2 { background-color: orange; }
#div3, #odiv3 { background-color: yellow; }
#div4, #odiv4 { background-color: green; }
#div5, #odiv5 { background-color: blue; }
#div6, #odiv6 { background-color: violet; }
#div7, #odiv7 { background-color: indigo; }
#div8, #odiv8 { background-color: chocolate; }
#div9, #odiv9 { background-color: teal; }
#div10, #odiv10 { background-color: darkolivegreen; }
#div11, #odiv11 { background-color: salmon; }
#div12, #odiv12 { background-color: plum; }
The advantage being that, when you decide to make a change, you only change in one place and they all change. Like, for example, removing the hard-coded 200px height and making them responsive.
The exact same principle applies to JavaScript. Rather than specifying the same function for the same event for each element, you should use a function/routine which goes through each of them and applies it:
const leftDivs = document.querySelector('#maindiv1').querySelectorAll('div');
[...leftDivs].forEach(div => {
div.ondrop = drop;
div.ondragover = allowDrop;
});
const rightDivs = document.querySelector('#maindiv2').querySelectorAll('div');
[...rightDivs].forEach(div => {
// `drop`, not `drop1`! We'll merge the two functions into one in next step
div.ondrop = drop;
div.ondragover = allowDrop;
});
const images = document.querySelector('#maindiv1').querySelectorAll('img');
[...images].forEach(img => {
img.ondragstart = drag;
img.draggable = true;
})
Obviously, you now need to remove the hardcoded ondrop, ondragover, ondragstart and draggable attributes, since you're applying them dynamically. Also note in the final working example (which you'll find at the end of the answer) I opted to rename all those functions to the exact attribute name they are being assigned to. It's clearer, hence easier to follow.
But, to have this working, instead of having two different functions handling each case:
when you drop inside an element which already has an image
when you drop inside an empty one
we should merge both into only one function:
function drop(ev) {
ev.preventDefault();
var src = document.getElementById(ev.dataTransfer.getData("src"));
var srcParent = src.parentNode;
var tgt = ev.currentTarget.firstElementChild;
if (tgt) {
ev.currentTarget.replaceChild(src, tgt);
srcParent.appendChild(tgt);
} else {
// if no `tgt`, (currentTarget is empty), just place the image (src) into it
ev.currentTarget.appendChild(src);
}
}
Speaking of which, I find your naming conventions a bit confusing. One might think naming is not important but, in the long run, good naming conventions greatly reduce the time needed to understand (and modify) the code. Here's how I'd have written that function:
function ondrop(ev) {
ev.preventDefault();
const image = document.getElementById(ev.dataTransfer.getData("src"));
// only proceed if `image` exists
if (image) {
const targetImage = ev.currentTarget.firstElementChild;
if (targetImage) {
// define `imageParent` only for the case where it is used
const imageParent = image.parentNode;
ev.currentTarget.replaceChild(image, targetImage);
imageParent.appendChild(targetImage);
} else {
ev.currentTarget.appendChild(image);
}
}
}
Let's see it working.
I took the liberty to clean it up more, I renamed a few things and also changed the CSS to have some basic responsiveness - it's not perfect but, IMHO, it's better:
const leftDivs = document.querySelector('#maindiv1').querySelectorAll('div');
const rightDivs = document.querySelector('#maindiv2').querySelectorAll('div');
[...leftDivs].concat([...rightDivs]).forEach(div => {
div.ondrop = ondrop;
div.ondragover = ondragover;
});
const images = document.querySelector('#maindiv1').querySelectorAll('img');
[...images].forEach(img => {
img.ondragstart = ondragstart;
img.draggable = true;
})
function ondragover(e) {
e.preventDefault();
}
function ondragstart(e) {
e.dataTransfer.setData("imageId", e.currentTarget.id);
}
function ondrop(e) {
e.preventDefault();
const img = document.getElementById(e.dataTransfer.getData("imageId"));
if (img) {
const targetImg = e.currentTarget.firstElementChild;
if (targetImg) {
const imgParent = img.parentNode;
e.currentTarget.replaceChild(img, targetImg);
imgParent.appendChild(targetImg);
} else {
e.currentTarget.appendChild(img);
}
}
}
* {
/* make all elements include border in width, so you don't have to use 24.9% */
box-sizing: border-box;
}
#maindiv1,
#maindiv2 {
width: 48%;
height: fit-content;
background-color: #ffc7b1;
float: left;
}
#maindiv1>div,
#maindiv2>div {
width: 25%;
padding-bottom: 25%;
float: left;
position: relative;
}
#maindiv1>div img,
#maindiv2>div img {
display: block;
width: 100%;
height: auto;
position: absolute;
}
#separator {
width: 2%;
min-height: 10px;
background-color: white;
float: left;
}
#div1,
#odiv1 {
background-color: red;
}
#div2,
#odiv2 {
background-color: orange;
}
#div3,
#odiv3 {
background-color: yellow;
}
#div4,
#odiv4 {
background-color: green;
}
#div5,
#odiv5 {
background-color: blue;
}
#div6,
#odiv6 {
background-color: violet;
}
#div7,
#odiv7 {
background-color: indigo;
}
#div8,
#odiv8 {
background-color: chocolate;
}
#div9,
#odiv9 {
background-color: teal;
}
#div10,
#odiv10 {
background-color: darkolivegreen;
}
#div11,
#odiv11 {
background-color: salmon;
}
#div12,
#odiv12 {
background-color: plum;
}
<div id="maindiv1">
<div id="div1">
<img src="https://picsum.photos/id/237/200/200" alt="" id="img1">
</div>
<div id="div2">
<img src="https://picsum.photos/id/238/200/200" alt="" id="img2">
</div>
<div id="div3">
<img src="https://picsum.photos/id/239/200/200" alt="" id="img3">
</div>
<div id="div4">
<img src="https://picsum.photos/id/240/200/200" alt="" id="img4">
</div>
<div id="div5">
<img src="https://picsum.photos/id/241/200/200" alt="" id="img5">
</div>
<div id="div6">
<img src="https://picsum.photos/id/242/200/200" alt="" id="img6">
</div>
<div id="div7">
<img src="https://picsum.photos/id/243/200/200" alt="" id="img7">
</div>
<div id="div8">
<img src="https://picsum.photos/id/244/200/200" alt="" id="img8">
</div>
<div id="div9">
<img src="https://picsum.photos/id/247/200/200" alt="" id="img9">
</div>
<div id="div10">
<img src="https://picsum.photos/id/248/200/200" alt="" id="img10">
</div>
<div id="div11">
<img src="https://picsum.photos/id/249/200/200" alt="" id="img11">
</div>
<div id="div12">
<img src="https://picsum.photos/id/250/200/200" alt="" id="img12">
</div>
</div>
<div id="separator"></div>
<div id="maindiv2">
<div id="odiv1"></div>
<div id="odiv2"></div>
<div id="odiv3"></div>
<div id="odiv4"></div>
<div id="odiv5"></div>
<div id="odiv6"></div>
<div id="odiv7"></div>
<div id="odiv8"></div>
<div id="odiv9"></div>
<div id="odiv10"></div>
<div id="odiv11"></div>
<div id="odiv12"></div>
</div>
on-click my div element not changing its background color to transparent, as it changed before when
I have only one div element. each div elements background color should change to transparent on each click in the corresponding div.
I'm a newbie to scripting how to achieve it
function myfunction()
{
var x = document.getElementById("001");
alert(document.write("x"));
x.addEventListener("click", vanish);
vanish();
function vanish()
{
$(document).ready(function() {
$("#x").click(function() {
$("#x").css('background-color', 'none');
$("#x").css('opacity', '0.0');
});
});
}
.box {
background-color: coral;
width: 30%;
height:100px;
display:inline-block;
border-radius:5px;
border:1px solid black;
padding-left:0px;
}
.text {
padding: 10px 0;
color:white;
font-weight:bold;
text-align:center;
}
#container {
white-space:nowrap;
text-align:center;
margin-left:25%;
margin-right:25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="box" id="001" onclick="myfunction()">
<div class="text">text</div>
</div>
<div class="box" id="001" name="mybox" onclick="myfunction()">
<div class="text">Text</div>
</div>
<div class="box" id="001" name="mybox" onclick="myfunction()">
<div class="text" id="003">Text</div>
</div>
</div>
Since you're using jQuery it could be simply by attaching the click to the common class and use $(this) to refer to the current clicked element.
NOTE: The id should be unique in the same document, replace the duplicate ones.
$(document).ready(function() {
$(".box").click(function() {
$(this).css('background-color', 'none');
$(this).css('opacity', '0.0');
});
});
.box {
background-color: coral;
width: 30%;
height: 100px;
display: inline-block;
border-radius: 5px;
border: 1px solid black;
padding-left: 0px;
}
.text {
padding: 10px 0;
color: white;
font-weight: bold;
text-align: center;
}
#container {
white-space: nowrap;
text-align: center;
margin-left: 25%;
margin-right: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="box" id="001">
<div class="text">text</div>
</div>
<div class="box" id="002" name="mybox">
<div class="text">Text</div>
</div>
<div class="box" id="003" name="mybox">
<div class="text" id="003">Text</div>
</div>
</div>
First of all id need to unique secondly x.addEventListener("click".. inside click handle is no more required.Also the vanish function is not required here and there is no necessity of document.ready and click inside that
function myfunction(event) {
$(event.target).css('background-color', 'none');
$(event.target).css('opacity', '0.0');
}
.box {
background-color: coral;
width: 30%;
height: 100px;
display: inline-block;
border-radius: 5px;
border: 1px solid black;
padding-left: 0px;
}
.text {
padding: 10px 0;
color: white;
font-weight: bold;
text-align: center;
}
#container {
white-space: nowrap;
text-align: center;
margin-left: 25%;
margin-right: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="box" id="" onclick="myfunction(event)">
<div class="text">text</div>
</div>
<div class="box" id="" name="mybox" onclick="myfunction(event)">
<div class="text">Text</div>
</div>
<div class="box" id="" name="mybox" onclick="myfunction(event)">
<div class="text" id="003">Text</div>
</div>
</div>
I would really aprreciate help on my code logic.
I have a loop of 100 divs and i want that when i a mouse overs on any one of the div it should display a popup(i have gotten just little adjustments left to make).
the problem is i can't seem to make the popup work on all divs when hovered on...only the first one works..
Please help show me what i am doing wrong. thank you
below is my code
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<link href="/css/index.css" rel="Stylesheet"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#popDiv').hover(
function() { $('#divTable').show(); },
function() { $('#divTable').hide(); }
);
});
</script>
</head>
<body >
<div id="wrapper">
<div id="container">
<form action="/models/top100.js">
<div id="divTable" class="tooltip" href="#">
<table id= "tbDetails" class="popup" >
<tbody><tr>
<td class="col1"></td>
<td class="col2"></td>
<td class="col3"></td>
<td class="col4"></td>
</tr> </tbody>
</table>
</div>
<div id="bodydiv"> <div id="leftdiv" >
<% for (var i = 0; i < 100; i++) { %>
<div id="popDiv">
</div>
<div id="tabDiv"></div>
<% } %>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
and the css
a.tooltip {outline:none; }
a.tooltip strong {line-height:20px;}
a.tooltip:hover {text-decoration:none;}
.tooltip {
z-index:10;display:none; margin-right:50px;
width:135px; line-height:16px;
position:absolute; color:#111;
border:1px solid #D2D2D2; background:#ffffff;
}
.tooltip.show { display: inline-block; }
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
.popup
{
width:135px;
height:50px;
text-align: center;
background-color: yellow;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
line-height: 50%;
}
#wrapper
{
margin: auto;
}
#container
{
position:absolute;
margin:0px auto;
}
#bodydiv
{
margin:0 auto;
padding:0px;
}
#leftdiv
{
margin-top:30vh;
margin-left:15vh;
width:90vh;
height:75vh;
float:left;
}
#popDiv
{
display:inline-block;
border-width: 2px;
border-style: solid;
border-color: rgb(236, 80, 184);
background-color: rgb(236, 80, 184);
margin-left:10vh;
width:5vh;
height:20vh;
}
#tabDiv
{
width:70vh;
height:20vh;
display:inline-block;
border-width: 2px;
border-style: solid;
background-color: rgb(179, 80, 236);
border-color: rgb(122, 204, 241);
}
thanks in advance
You are using ID selector when writing hover function so that'll work only for the first element in the DOM. Instead you need to use class selector and give class name to divs like this.
$(document).ready(function() {
$(".test").hover(function() {
$(this).css("background-color", "yellow");
}, function() {
$(this).css("background-color", "white");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Hover the mouse pointer over this</div>
<div class="test">Hover the mouse pointer over this</div>
<div class="test">Hover the mouse pointer over this</div>
P.S Your id should be unique within the page.
Give your divs the same class, and us it in your hover.
$(document).ready(function () {
$('.popDiv').hover(
function () {
$('#divTable').show();
},
function () {
$('#divTable').hide();
}
);
});
.popup {
width: 135px;
height: 50px;
text-align: center;
background-color: yellow;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
line-height: 50%;
}
#wrapper {
margin: auto;
}
#container {
position: absolute;
margin: 0px auto;
}
#bodydiv {
margin: 0 auto;
padding: 0px;
}
#leftdiv {
margin-top: 30vh;
margin-left: 15vh;
width: 90vh;
height: 75vh;
float: left;
}
#popDiv {
display: inline-block;
border-width: 2px;
border-style: solid;
border-color: rgb(236, 80, 184);
background-color: rgb(236, 80, 184);
margin-left: 10vh;
width: 5vh;
height: 20vh;
}
#tabDiv {
width: 70vh;
height: 20vh;
display: inline-block;
border-width: 2px;
border-style: solid;
background-color: rgb(179, 80, 236);
border-color: rgb(122, 204, 241);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="container">
<form action="/models/top100.js">
<div id="divTable" style="display: none" class="tooltip" href="#">
<table id="tbDetails" class="popup">
<tbody>
<tr>
<td class="col1"></td>
<td class="col2"></td>
<td class="col3"></td>
<td class="col4"></td>
</tr>
</tbody>
</table>
</div>
<div id="bodydiv">
<div id="leftdiv">
<!--<% for (var i = 0; i < 100; i++) { %>-->
<div class="popDiv" style="width: 200px; height: 50px; background-color: green">
1
</div>
<div class="popDiv" id="tabDiv" style="width: 200px; height: 50px; background-color: red">2</div>
<!--<% } %>-->
</div>
</div>
</form>
</div>
</div>
Hello I have the following code and need to be able to position both elements within the box (#third) that is contained within a container. Please provide code for the positioning of both elements. I need to position the following elements (see the following lines)
append('$${t}^x\sqrt{t}^x$$'); and
append('<label>Filename:</label> <input type="text" name="file" id="file" />');
<!-- saved from url=(0022) -->
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest /MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
//ev.target.id this gives us the id of the symbol being dragged
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
//ev.target.appendChild(document.getElementById(data));
switch(data)
{
case("drag8"):
$('#second').append('$${t}^x\sqrt{t}^x$$');
$('#container').append('<div id="third" ondrop="drop(event)" ondragover="allowDrop(event)"></div>');
$('#third').append('$${t}^x\sqrt{t}^x$$');
$('#third').append('<label>Filename:</label> <input type="text" name="file" id="file" />');
break;
default:
}
MathJax.Hub.Queue(["Typeset",MathJax.Hub,"second"]);
MathJax.Hub.Queue(["Typeset",MathJax.Hub,"third"]);
}
</script>
<style>
#header {
width: 100%;
background-color: white;
height: 30px;
}
#container {
width: 600px;
height:1500px
background-color: #ffffff;
margin: auto;
}
#first {
width: 100px;
border: 2px solid black;
float: left;
height: 400px;
}
#second {
width: 300px;
border: 2px solid black;
top:0;
float: right;
height: 100px;
}
#third {
position: absolute;
top: 180px;
border: 2px solid black;
right:430px;
width: 200px;
height: 100px;
}
#third .power1{
width: 20px;
height: 10px;
float: left;
border: 2px solid black;
}
#clear {
clear: both;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="container">
<div id="first">
<span id="drag8" style="text-decoration:overline;" draggable="true" ondragstart="drag(event)" >$${t}^x\sqrt{t}^x$$</span>
</div>
<div id="second" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="clear"></div>
</div>
</body>
Merge the 3 appends
$('#container').append('<div id="third" ondrop="drop(event)" ondragover="allowDrop(event)">$${t}^x\sqrt{t}^x$$<label>Filename:</label> <input type="text" name="file" id="file" /></div>');
I want to hightlight a div after I dropped an element into it.
How can I identify the div where I dragged the item to and highlight it?
In my program the code below works but not in this sniplet. Here I cannot drag the div's although I made them draggable. What did I do wrong?
var overviewJS = new function() {
this.allowDrop = function(ev) {
ev.preventDefault();
}
this.drag = function(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
this.drop = function(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
//$('.tbProject').append("Some content");
$('.tbProject').effect("highlight", {}, 3000);
}
}
.tbDocument {
background-color: grey;
border: 1px solid #412418;
border-radius: 2px;
width: 120px;
}
.tbProject {
width: 40px;
height: 20px;
border: 1px solid #412418;
border-radius: 2px;
}
[draggable] {
cursor: move;
padding: 10px 20px;
background-color: #666;
border: 2px dashed #eee;
margin: 10px 0;
color: white;
width: 160px;
-webkit-user-drag: element;
}
<div class="tbProject" ondrop="overviewJS.drop(event)" ondragover="overviewJS.allowDrop(event)">
<center>test</center>
</div>
<div class="tbProject" ondrop="overviewJS.drop(event)" ondragover="overviewJS.allowDrop(event)">
<center>test</center>
</div>
<div class="tbProject" ondrop="overviewJS.drop(event)" ondragover="overviewJS.allowDrop(event)">
<center>test</center>
</div>
<br>
<br>
<div class="tbDocument" draggable="true">
document to drag
</div>
Your namespace syntax is wrong and you did not include jQuery UI which is needed for .effect(). To then specifically highlight the drop target use ev.target.
Here your adjusted snippet:
overviewJS = {
allowDrop: function (ev) {
ev.preventDefault();
},
drag: function (ev) {
ev.dataTransfer.setData("text", ev.target.id);
},
drop: function (ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
//$('.tbProject').append("Some content");
$(ev.target).effect("highlight", {}, 3000);
}
}
.tbDocument {
background-color: grey;
border: 1px solid #412418;
border-radius: 2px;
width: 120px;
}
.tbProject {
width: 40px;
height: 20px;
border: 1px solid #412418;
border-radius: 2px;
}
[draggable] {
cursor: move;
padding: 10px 20px;
background-color: #666;
border: 2px dashed #eee;
margin: 10px 0;
color: white;
width: 160px;
-webkit-user-drag: element;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="tbProject" ondrop="overviewJS.drop(event)" ondragover="overviewJS.allowDrop(event)">
<center>test</center>
</div>
<div class="tbProject" ondrop="overviewJS.drop(event)" ondragover="overviewJS.allowDrop(event)">
<center>test</center>
</div>
<div class="tbProject" ondrop="overviewJS.drop(event)" ondragover="overviewJS.allowDrop(event)">
<center>test</center>
</div>
<br>
<br>
<div class="tbDocument" draggable="true">document to drag</div>