Duplicating Image within Drag and Drop Grid - javascript

I have a drag and drop where you drag images from the sidebar into a grid. It clones the image when it goes into the grid. Although, when I drag an image in the grid to another grid space, it copies it, and I don't want it to. This is my code:
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 el = ev.target;
if (!el.classList.contains('dropzone')) {
el = ev.target.parentNode;
ev.target.remove();
}
el.appendChild(document.getElementById(data).cloneNode(true));
}
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementsByTagName("body")[0].style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementsByTagName("body")[0].style.marginLeft= "0";
}
#div1, #div2, #div3, #div4{
float: left;
width: 55px;
height: 55px;
border: 1px solid black;
}
#div5, #div6, #div7, #div8{
float: left;
width: 55px;
height: 55px;
border: 1px solid black;
}
#div9, #div10, #div11, #div12{
float: left;
width: 55px;
height: 55px;
border: 1px solid black;
}
#div13, #div14, #div15, #div16{
float: left;
width: 55px;
height: 55px;
border: 1px solid black;
}
.row2 {
clear: both;
}
.row3 {
clear: both;
}
.row4 {
clear: both;
}
body {
transition: margin .5s;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
.row {
width:100%;
display:inline-block;
margin-bottom:10px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
<!DOCTYPE html>
<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 el = ev.target;
if (!el.classList.contains('dropzone')) {
el = ev.target.parentNode;
ev.target.remove();
}
el.appendChild(document.getElementById(data).cloneNode(true));
}
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementsByTagName("body")[0].style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementsByTagName("body")[0].style.marginLeft= "0";
}
</script>
<body>
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Materials</span>
</div>
<div id="div1" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div4" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="row2">
<div id="div5" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div6" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div7" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div8" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div class="row3">
<div id="div9" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div10" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div11" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div12" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div class="row4">
<div id="div13" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div14" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div15" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div16" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div id="mySidenav" class="sidenav">
×
<a href="#">
<img src="bricks.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="55" height="55">
Bricks
</a>
<a href="#">
<img src="halfbrick.png" draggable="true" ondragstart="drag(event)" id="drag1.3" width="55" height="55">
Half Brick
</a>
<a href="#">
<img src="halfbrick2.png" draggable="true" ondragstart="drag(event)" id="drag1.6" width="55" height="55">
Half Brick
</a>
<a href="#">
<img src="#" draggable = "true" ondragstart="drag(event)" id="drag2" width="55" height="55">
Stone
</a>
<a href="#">
<img src="#" draggable = "true" ondragstart="drag(event)" id="drag3" width="55" height="55">
Wood
</a>
<a href="#">
<img src="#" draggable="true" ondragstart="drag(event)" id="drag4" width="55" height="55">
Eraser
</a>
</div>
</body>
<style>
#div1, #div2, #div3, #div4{
float: left;
width: 55px;
height: 55px;
border: 1px solid black;
}
#div5, #div6, #div7, #div8{
float: left;
width: 55px;
height: 55px;
border: 1px solid black;
}
#div9, #div10, #div11, #div12{
float: left;
width: 55px;
height: 55px;
border: 1px solid black;
}
#div13, #div14, #div15, #div16{
float: left;
width: 55px;
height: 55px;
border: 1px solid black;
}
.row2 {
clear: both;
}
.row3 {
clear: both;
}
.row4 {
clear: both;
}
body {
transition: margin .5s;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
.row {
width:100%;
display:inline-block;
margin-bottom:10px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
How can I fix this?


I found that ev.target refers to the div where item is being dropped, so contains('dropzone') always returns true.
this worked for me:
function drag(ev, source) {
ev.dataTransfer.setData("text", ev.target.id);
ev.dataTransfer.setData("parent", source.parentNode.tagName);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var parent= ev.dataTransfer.getData("parent");
// console.log(parent);
if(parent == "A"){
el.appendChild(document.getElementById(data).cloneNode(true));
}
else{
ev.target.appendChild(document.getElementById(data));
}
}
Here you can store parentNode.tagName(either 'a' or 'div') of the dragged item into dataTransfer and access it in the drop() function, based on which you clone the item or simple move it.

Related

CSS accordion menu with pictures

Can someone pls assist me with a means of performing the following
using jQuery?
Currently, I have some images in a div container, and as for a specific background I have to use the position: absolute. My goal is to implement an according menu where the user clicks the "Menu+" image button, the image
button then toggles back to "Menu-".
Here what I have done:
body{
background-image: url('https://i.pinimg.com/originals/16/51/a7/1651a7e049cf443edc1cffe560600e0f.jpg');
}
.openmenu{
position:fixed;
margin:0 auto;
width:300px;
overflow-y:auto;
overflow-x: hidden;
}
.img1 {
position: absolute;
top: 0px;
left: 18px;
z-index: -1;
}
.img2 {
position: absolute;
top: 102px;
left: 18px;
}
.img3 {
position: absolute;
top: 217px;
left: 18px;
}
#pic-wrapper{
margin:2em auto;
position:absolute;
cursor:pointer
}
#pic{
-moz-transition:all 1s ease-out;
-webkit-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
-ms-transition:all 1s ease-out;
position:absolute;
z-index:1;
opacity:1
}
#pic-inner{
z-index:0;
position:absolute;
}
#pic:hover{
opacity:0
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<body>
<div id="pic-wrapper">
<div class="img1">
<img src="https://provact.altervista.org/newct/colonna_sx/home_off.png" id="pic">
<img src="https://provact.altervista.org/newct/colonna_sx/home_on.png" id="pic-inner">
</div>
<div class="img2">
<img src="https://provact.altervista.org/newct/colonna_sx/scheda_off.png" id="pic">
<img src="https://provact.altervista.org/newct/colonna_sx/scheda_on.png" id="pic-inner">
</div>
<div class="img3">
<img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_off.png" id="pic">
<img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_on.png" id="pic-inner">
</div>
</div>
Here the result I would like to create:
Example
Any help/direction would be much appreciated.
Thanks.

$('.accordion-section-title').click(function(e) {
var currentAttrvalue = $(this).attr('href');
if ($(e.target).is('.active')) {
$(this).removeClass('active');
$('.accordion-section-content:visible').slideUp(300);
} else {
$('.accordion-section-title').removeClass('active').filter(this).addClass('active');
$('.accordion-section-content').slideUp(300).filter(currentAttrvalue).slideDown(300);
}
});
.accordion {
overflow: hidden;
border-radius: 4px;
background: transparent;
}
.accordion-section-title {
width: 100%;
padding: 15px;
}
.accordion-section-title {
width: 100%;
padding: 15px;
display: inline-block;
background: transparent;
border-bottom: 1px solid #1a1a1a;
font-size: 1.2em;
color: #fff;
transition: all linear 0.5s;
text-decoration: none;
}
.accordion-section-title.active {
background-color: #4c4c4c;
text-decoration: none;
}
.accordion-section-title:hover {
background-color: grey;
text-decoration: none;
}
.accordion-section:last-child .accordion-section-title {
border-bottom: none;
}
.accordion-section-content {
padding: 15px;
display: none;
color: white;
}
.accordion-section {
background-image: url('https://i.pinimg.com/originals/16/51/a7/1651a7e049cf443edc1cffe560600e0f.jpg');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">
<img src="https://provact.altervista.org/newct/colonna_sx/home_off.png" id="pic">
</a>
<div id="accordion-1" class="accordion-section-content">
<p>This is first accordion section</p>
</div>
<a class="accordion-section-title" href="#accordion-2">
<img src="https://provact.altervista.org/newct/colonna_sx/scheda_off.png" id="pic">
</a>
<div id="accordion-2" class="accordion-section-content">
<p> this is second accordian section</p>
</div>
<a class="accordion-section-title" href="#accordion-3">
<img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_off.png" id="pic">
</a>
<div id="accordion-3" class="accordion-section-content">
<p> this is third accordian section</p>
</div>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.accordion {
overflow: hidden;
border-radius: 4px;
background: transparent;
}
.accordion-section-title {
width: 100%;
padding: 15px;
}
.accordion-section-title {
width: 100%;
padding: 15px;
display: inline-block;
background: transparent;
border-bottom: 1px solid #1a1a1a;
font-size: 1.2em;
color: #fff;
transition: all linear 0.5s;
text-decoration: none;
}
.accordion-section-title.active {
background-color: #4c4c4c;
text-decoration: none;
}
.accordion-section-title:hover {
background-color: grey;
text-decoration: none;
}
.accordion-section:last-child .accordion-section-title {
border-bottom: none;
}
.accordion-section-content {
padding: 15px;
display: none;
color: white;
}
.accordion-section {
background-image:url('https://i.pinimg.com/originals/16/51/a7/1651a7e049cf443edc1cffe560600e0f.jpg');
}
</style>
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">
<img src="https://provact.altervista.org/newct/colonna_sx/home_off.png" id="pic">
</a>
<div id="accordion-1" class="accordion-section-content">
<p>This is first accordion section</p>
</div>
<a class="accordion-section-title" href="#accordion-2">
<img src="https://provact.altervista.org/newct/colonna_sx/scheda_off.png" id="pic">
</a>
<div id="accordion-2" class="accordion-section-content">
<p> this is second accordian section</p>
</div>
<a class="accordion-section-title" href="#accordion-3">
<img src="https://provact.altervista.org/newct/colonna_sx/aggiorna_off.png" id="pic">
</a>
<div id="accordion-3" class="accordion-section-content">
<p> this is third accordian section</p>
</div>
</div>
</div>
<script>
$('.accordion-section-content').hide();
$('.accordion-section-title').click(function(e) {
$('.accordion-section-content').hide();
var currentAttrvalue = $(this).attr('href');
if($(this).hasClass('active'))
{
$(this).removeClass('active');
}
else
{
$(this).addClass('active');
}
$(currentAttrvalue).slideToggle();
});
</script>

I want the animation to work on the progress bar when hovering on an a element

Here is my HTML and CSS:
.choosebybrand {
position: relative;
display: flex;
width: 100%;
height: auto;
justify-content: space-around;
flex-wrap: wrap;
background: linear-gradient(to bottom, #ffffff, whitesmoke);
margin-bottom: 0px;
text-align: center;
padding: 70px;
}
.choosebybrand img {
box-shadow: 0px 5px 20px 1px rgba(0, 0, 0, 1);
margin: 15px;
border-radius: 20px;
}
.choosebybrandtext h1 {
margin-top: 100px;
left: 50%;
text-align: center;
color: rgb(255, 0, 68);
font-size: 40px;
font-style: italic;
}
.choosebybrand h3 {
margin-top: 20px;
font-size: 20px;
font-family: 'Pacifico', 'cursive';
color: rgba(0, 0, 0, 0.2);
text-decoration: none;
}
.apple:hover h3,
.motorola:hover h3,
.lg:hover h3,
.samsung:hover h3,
.huawei:hover h3 {
cursor: pointer;
color: rgb(255, 0, 68);
transition: 1s;
}
a:hover {
text-decoration: none;
}
.icons a {
margin: 10px;
}
.progress-bar {
animation: pr 5s infinite;
background-color: red;
}
#keyframes pr {
0% {
width: 0;
color: red;
}
10% {
background-color: blue;
}
20% {
background-color: black;
}
30% {
background-color: yellow;
}
40% {
background-color: tomato;
}
50% {
width: 100%;
background-color: violet;
}
60% {
background-color: rgb(184, 145, 145);
}
70% {
background-color: white;
}
80% {
background-color: rgb(0, 255, 234);
}
100% {
width: 0;
background-color: red;
}
}
<div class="choosebybrandtext">
<h1>Choose by Brand</h1>
</div>
<div style="margin-top: 50px" data-aos="fade-in" class="choosebybrand">
<div class="samsung">
<a href="samsung.html">
<div class="frontimage">
<img src="images/samsung.png" height="232px" width="115px" alt="">
</div>
<h3>Samsung</h3>
</a>
</div>
<div class="apple">
<a href="apple.html">
<div class="frontimage">
<img src="images/apple.png" height="232px" width="115px" alt="">
</div>
<H3>Apple</H3>
</a>
</div>
<div class="lg">
<a href="lg.html">
<div class="frontimage">
<img src="images/LG.png" height="232px" width="115px" alt="">
</div>
<h3>Lg</h3>
</a>
</div>
<div class="motorola">
<a href="motorola.html">
<div class="frontimage">
<img src="images/Motorola.png" height="232px" width="115px" alt="">
</div>
<h3>Motorola</h3>
</a>
</div>
<div class="huawei">
<a href="huawei.html">
<div class="frontimage">
<img src="images/huawei.png" height="232px" width="115px" alt="">
</div>
<h3>Huawei</h3>
</a>
</div>
</div>
<div class="progress">
<div class="progress-bar"></div>
</div>

const element = document.querySelector(".element")
const progressBar = document.querySelector(".progress-bar")
element.addEventListener("mouseover", function() {
progressBar.style.animation = "pr 5s infinite"
})

It would be best to put an eventListener on the element.
const element = document.querySelector(".element")
const progressBar = document.querySelector(".progress-bar")
element.addEventListener("mouseover", function() {
progressBar.style.animation = "pr 5s infinite"
})
make sure to replace .element with your own class

I made an expand button in html which changes icon and shows content (and reverses it) but media query works on second time (not first)

$('#click1').click(function () {
var media = window.matchMedia("(max-width: 900px)")
var media2 = window.matchMedia("(min-width: 901px)")
if($(this).text() == 'unfold_more')
$(this).text('unfold_less');
else
$(this).text( 'unfold_more');
var x = document.getElementById("myDIV1");
console.log("before:", x.style.display)
if (x.style.display === "none" && media.matches) {
x.style.display = "grid";
} else if (x.style.display === "grid" && media.matches) {
x.style.display = "none";
} else if (x.style.display === "flex") {
x.style.display = "none";
} else {
x.style.display = "flex";
}
console.log("after:", x.style.display)
});
#import url('https://fonts.googleapis.com/css?family=Tourney&effect=emboss');
body {
background-color: rgb(0, 0, 0);
color: whitesmoke;
}
.title {
padding-left: 5.5%;
font-family: 'Tourney', sans-serif;
font-size: 30px;
font-weight: bold;
outline: none;
text-transform: uppercase;
color: white;
display: inline;
}
.category {
padding-left: 10%;
padding-right: 10%;
font-family: 'Titillium Web', sans-serif;
font-weight: bold;
margin-top: 5%;
font-size: 20px;
display: inline-table;
}
.line {
height: 3px;
border: 0;
background: linear-gradient(135deg, #5335cf 0%, #de005e 25%, #f66e48 50%, #de005e 75%, #5335cf 100%);
background-size: 400%;
animation: animate 5s linear infinite;
}
#keyframes animate {
to {
background-position: 400%;
}
.line2 {
height: 3px;
border: 0;
background: radial-gradient(circle, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 19%, rgba(0, 212, 255, 1) 100%);
background-size: 400%;
animation: animate 10s linear infinite;
align-self: left;
margin-left: 10%;
margin-top: -15px;
width: 80%;
}
.hot {
filter: invert();
}
.hyp {
text-decoration: none;
color: whitesmoke;
}
}
h2 {
color: #3696dc;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
}
p {
font-size: 16px;
line-height: 24px
}
.container {
width: 82%;
margin: 0 auto;
list-style: none;
background-color: transparent;
display: flex;
justify-content: center;
}
.columns {
margin: 25px 15px 25px;
border-radius: 0px;
flex-basis: 33%;
background-color: black;
display: flex;
}
.card {
padding: 5px 5px;
border: 1px solid #00d4ff;
background-color: transparent;
text-align: center;
text-decoration: none;
transition: all .3s ease-in-out;
}
.card2 {
padding: 5px 5px;
border: 1px solid #00d4ff;
background-color: transparent;
text-align: center;
font-family: 'Titillium Web', sans-serif;
text-decoration: none;
transition: all .3s ease-in-out;
}
.card:hover {
border: 3px solid #00d4ff;
cursor: crosshair;
transform: scale(1.1);
}
.card2:hover {
border: 3px solid #00d4ff;
cursor: crosshair;
}
img {
max-width: 100%
}
.pointer {
cursor: pointer;
}
.contain {
display: none;
background-color: inherit;
padding: 0;
font-family: 'Titillium Web', sans-serif;
transition: all .3s ease-in-out;
color: whitesmoke;
}
.card:hover .contain {
display: block;
transition: all .3s ease-in-out;
}
.card2:hover .contain {
display: block;
transition: all .3s ease-in-out;
}
.para {
margin-left: 10%;
margin-right: 10%;
font-family: 'Titillium Web', sans-serif;
}
#click1 {
position: unset;
margin-right: 10%;
float: right;
margin-top: 80px;
cursor: pointer;
user-select: none;
}
#click2 {
position: unset;
margin-right: 10%;
float: right;
margin-top: 70px;
cursor: pointer;
user-select: none;
}
#click3 {
position: unset;
margin-right: 10%;
float: right;
margin-top: 70px;
cursor: pointer;
user-select: none;
}
#click4 {
position: unset;
margin-right: 10%;
float: right;
margin-top: 70px;
cursor: pointer;
user-select: none;
}
#myDIV1 {
display: none;
}
#myDIV2 {
display: none;
}
#myDIV3 {
display: none;
}
#myDIV4 {
display: none;
}
#page {
overflow: hidden;
}
#media screen and (max-width: 900px) {
.title {
font-size: 20px;
}
.container {
display: flex;
}
.card {
border: 1px solid #00d4ff;
}
.card2 {
border: 1px solid #00d4ff;
}
.card:hover {
border: 2px solid #00d4ff;
}
.card2:hover {
border: 2px solid #00d4ff;
}
.insta {
padding-right: 1%;
width: 13px;
height: 13px;
}
.category {
font-size: 16px;
}
.hot {
width: 16px;
height: 16px;
}
.contain {
font-size: 12px;
grid-template-columns: 50% 50%;
}
#click1 {
margin-top: 20px;
}
#click2 {
margin-top: 20px;
}
#click3 {
margin-top: 20px;
}
#click4 {
margin-top: 20px;
}
#myDIV1 {
display: none;
grid-template-columns: 50% 50%;
}
#myDIV2 {
display: none;
grid-template-columns: 50% 50%;
}
#myDIV3 {
display: none;
grid-template-columns: 50% 50%;
}
#myDIV4 {
display: none;
grid-template-columns: 50% 50%;
}
}
#media screen and (max-width: 680px) {
.qr {
width: 200px;
height: 200px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>PixelByte</title>
<link href="style.css" rel="stylesheet">
<link rel="icon" href="Cube_1.png">
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/4.0.0/iconfont/material-icons.min.css">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://kit.fontawesome.com/1935d064dd.js" crossorigin="anonymous">
</script>
<script src="script.js">
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script type="text/javascript" src="js/lightslider.js">
</script>
</head>
<body id="page">
<div class="content">
<header>
<div class="title">
<a href="index.html" class="hyp">
<h1 class="title"><b>PIXELBYTE</b></h1>
</a>
</div>
</header>
<hr class="line" width="80%" />
<! –– HOT AND TRENDING ––>
<p class="category"><img src="fire.png" alt="hot" width="27px" height="27px" class="hot" id="hot"> Hot and Trending </p><span class="material-icons" id="click1">unfold_more</span>
<hr class="line2" />
<div class="container">
<div class="columns">
<a href="https://www.instagram.com/_zaingfx/" target="_blank" rel="noreferrer noopener">
<div class="card">
<img src="MicroSHIBA/Micro Shiba-1.png.png" alt="MicroSHIBA" width="100%" height="100%">
<p class="contain">
Lorem Ipsum
</p>
</div>
</a>
</div>
<div class="columns">
<a href="https://www.instagram.com/_zaingfx/" target="_blank" rel="noreferrer noopener">
<div class="card">
<img src="DOGELON/Dogelon Mars-1.png.png" alt="DOGELON Mars" width="100%" height="100%">
<p class="contain">
Lorem Ipsum
</p>
</div>
</a>
</div>
<div class="columns">
<a href="https://www.instagram.com/_zaingfx/" target="_blank" rel="noreferrer noopener">
<div class="card">
<img src="Baby EverDoge/Baby Everdoge-1.png (6).png" alt="Baby Everdoge" width="100%" height="100%">
<p class="contain">
Lorem Ipsum
</p>
</div>
</a>
</div>
<div class="columns">
<a href="https://www.instagram.com/_zaingfx/" target="_blank" rel="noreferrer noopener">
<div class="card">
<img src="Ghoul-1.png.png" alt="Ghoul" width="100%" height="100%">
<p class="contain">
Lorem Ipsum
</p>
</div>
</a>
</div>
</div>
<div class="container" id="myDIV1">
<div class="columns">
<a href="https://www.instagram.com/_zaingfx/" target="_blank" rel="noreferrer noopener">
<div class="card">
<img src="MicroSHIBA/Micro Shiba-1.png.png" alt="MicroSHIBA" width="100%" height="100%">
<p class="contain">
Lorem Ipsum
</p>
</div>
</a>
</div>
<div class="columns">
<a href="https://www.instagram.com/_zaingfx/" target="_blank" rel="noreferrer noopener">
<div class="card">
<img src="DOGELON/Dogelon Mars-1.png.png" alt="DOGELON Mars" width="100%" height="100%">
<p class="contain">
Lorem Ipsum
</p>
</div>
</a>
</div>
<div class="columns">
<a href="https://www.instagram.com/_zaingfx/" target="_blank" rel="noreferrer noopener">
<div class="card">
<img src="Baby EverDoge/Baby Everdoge-1.png (6).png" alt="Baby Everdoge" width="100%" height="100%">
<p class="contain">
Lorem Ipsum
</p>
</div>
</a>
</div>
<div class="columns">
<a href="https://www.instagram.com/_zaingfx/" target="_blank" rel="noreferrer noopener">
<div class="card">
<img src="Ghoul-1.png.png" alt="Ghoul" width="100%" height="100%">
<p class="contain">
Lorem Ipsum
</p>
</div>
</a>
</div>
</div>
</body>
</html>
What I want it to do is display flex styled div on big screens and grid styled div on smaller ones. It works but on toggling the button the second time. The first time I click the button, it shows flex type div.
x.style.display in the css is display: none
var media = window.matchMedia("(max-width: 900px)")
$('#click1').click(function() {
if ($(this).text() == 'unfold_more')
$(this).text('unfold_less');
else
$(this).text('unfold_more');
var x = document.getElementById("myDIV1");
if (x.style.display === "flex") {
x.style.display = "none";
} else if (x.style.display === "flex") {
x.style.display = "none";
} else if (x.style.display === "grid" && media.matches) {
x.style.display = "none";
} else if (x.style.display === "none" && media.matches) {
x.style.display = "grid";
} else {
x.style.display = "flex";
}

Swap (Drag Drop) not working in a specific div

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>

conditions for divs in drag and drop

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>

Categories