Javascript adopting image size when dropped

Javascript adopting image size when dropped - javascript

As you can see in the code below I would like to drag an image to the id "centerimg". I've hidden several images cause that's the images who would adopt to the center image. The problem is it doesn't adopt to the size of the center image. It takes the size of the image being dragged. I've tried manipulating its CSS through DOM elements and the only image that changed it's size is the initial image that was dragged.
function doFirst() {
mypic = document.getElementById('img1');
mypic.addEventListener("dragstart", startDrag, false);
mypictwo = document.getElementById('img2');
mypictwo.addEventListener("dragstart", startDrag2, false);
mypicthree = document.getElementById('img3');
mypicthree.addEventListener("dragstart", startDrag3, false);
mypicfour = document.getElementById('img4');
mypicfour.addEventListener("dragstart", startDrag4, false);
centerbox = document.getElementById("mainbox");
centerbox.addEventListener("dragenter", function(e) {
e.preventDefault();
}, false);
centerbox.addEventListener("dragover", function(e) {
e.preventDefault();
}, false);
centerbox.addEventListener("drop", dropped, false);
}
//--------------startDrag FUNCTIONS -----------------------//
function startDrag(e) {
var code = '<img id="img1" src="images/ph1.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag2(e) {
var code = '<img id="img2" src="images/ph2.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag3(e) {
var code = '<img id="img2" src="images/ph3.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag4(e) {
var code = '<img id="img2" src="images/ph4.jpg">';
e.dataTransfer.setData('Text', code);
}
//--------------startDrag FUNCTIONS -----------------------//
function dropped(e) {
e.preventDefault();
centerbox.innerHTML = e.dataTransfer.getData('Text');
}
function drop(event) {
}
window.addEventListener("load", doFirst, false);
#centerimg {
width: 500px;
height: 500px;
}
#img2, #img1, #img3, #img4 {
width: 150px;
height: 150px;
}
#img5 {
visibility: hidden;
}
.changeimagesize {
height: 500px;
width: 500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="drag.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3" id="1box">
<img id="img1" src="images/image1.jpg">
</div>
<div class="col-md-3" id="2box">
<img id="img2" src="images/image2.jpg">
</div>
<div class="col-md-3" id="3box">
<img id="img3" src="images/image4.jpg">
</div>
<div class="col-md-3" id="4box">
<img id="img4" src="images/image5.jpg">
</div>
</div>
</div>
<div class="row">
<center>
<div class="col-md-push-4 col-md-4 mainbox" ondrop="drop(event)" id="mainbox">
<img id="centerimg" src="images/center.png">
</div>
</center>
</div>
<!-- hidden images here-->
<img id="img5" class="img5" src="images/ph1.jpg">
<img id="img5" class="img5" src="images/ph2.jpg">
<img id="img5" class="img5" src="images/ph3.jpg">
<img id="img5" class="img5" src="images/ph4.jpg">
<img id="img5" class="img5" src="images/ph5.jpg">
<!--end of hidden images-->
</body>
</html>

Possible solution: in the dropped function force the new img tag to get the 500px width and height. In this solution I put width and height hardcoded, but I think there is also the possibility to overcome this.
function doFirst() {
mypic = document.getElementById('img1');
mypic.addEventListener("dragstart", startDrag, false);
mypictwo = document.getElementById('img2');
mypictwo.addEventListener("dragstart", startDrag2, false);
mypicthree = document.getElementById('img3');
mypicthree.addEventListener("dragstart", startDrag3, false);
mypicfour = document.getElementById('img4');
mypicfour.addEventListener("dragstart", startDrag4, false);
centerbox = document.getElementById("mainbox");
centerbox.addEventListener("dragenter", function(e) {
e.preventDefault();
}, false);
centerbox.addEventListener("dragover", function(e) {
e.preventDefault();
}, false);
centerbox.addEventListener("drop", dropped, false);
}
//--------------startDrag FUNCTIONS -----------------------//
function startDrag(e) {
var code = '<img id="img1" src="images/ph1.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag2(e) {
var code = '<img id="img2" src="images/ph2.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag3(e) {
var code = '<img id="img2" src="images/ph3.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag4(e) {
var code = '<img id="img2" src="images/ph4.jpg">';
e.dataTransfer.setData('Text', code);
}
//--------------startDrag FUNCTIONS -----------------------//
function dropped(e) {
e.preventDefault();
centerbox.innerHTML = e.dataTransfer.getData('Text'); console.log(centerbox);
centerbox.getElementsByTagName("img")[0].style.width = "500px";
centerbox.getElementsByTagName("img")[0].style.height = "500px";
}
function drop(event) {
}
window.addEventListener("load", doFirst, false);
#centerimg {
width: 500px;
height: 500px;
}
#img2,
#img1,
#img3,
#img4 {
width: 150px;
height: 150px;
}
#img5 {
visibility: hidden;
}
.changeimagesize {
height: 500px;
width: 500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="drag.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3" id="1box">
<img id="img1" src="images/image1.jpg">
</div>
<div class="col-md-3" id="2box">
<img id="img2" src="images/image2.jpg">
</div>
<div class="col-md-3" id="3box">
<img id="img3" src="images/image4.jpg">
</div>
<div class="col-md-3" id="4box">
<img id="img4" src="images/image5.jpg">
</div>
</div>
</div>
<div class="row">
<center>
<div class="col-md-push-4 col-md-4 mainbox" ondrop="drop(event)" id="mainbox">
<img id="centerimg" src="images/center.png">
</div>
</center>
</div>
<!-- hidden images here-->
<img id="img5" class="img5" src="images/ph1.jpg">
<img id="img5" class="img5" src="images/ph2.jpg">
<img id="img5" class="img5" src="images/ph3.jpg">
<img id="img5" class="img5" src="images/ph4.jpg">
<img id="img5" class="img5" src="images/ph5.jpg">
<!--end of hidden images-->
</body>
</html>

Related

Elements not fading in on user scroll

Attempting to make image elements fade up when user scrolls down through page. Currently, images are not showing up at all. There is an issue with the JS, but not sure how else to trouble shoot. HTML, CSS, and JS below. A fresh set of eyes would probably be most helpful. Thank you!
const faders = document.querySelectorAll('.fade-in');
const appearOptions = {
threshold: 1,
rootMargin: "0px 0px -100px 0px",
};
const appearOnScroll = new IntersectionObserver(function(entries,
appearOnScroll) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
} else {
entry.target.classList.add('appear');
appearOnScroll.unobserve(entry.target);
}
})
},
appearOptions);
faders.forEach(fader => {
appearOnScroll.observe(fader);
})
And my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/observer.js"></script>
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<main>
<h3>Design Studio Project</h3>
<div class="videowrapper">
<video controls="controls" width="1920" height="1080"
name="studioProject" type="mov" src="images/web_StudioProject_rd03.mp4"></video>
</div>
<div class="remainingslides">
<img class="fade-in" src="images/remaining_keyframes-01.png">
<img class="fade-in" src="images/remaining_keyframes-02.png">
<img class="fade-in" src="images/remaining_keyframes-03.png">
<img class="fade-in" src="images/remaining_keyframes-04.png">
<img class="fade-in" src="images/remaining_keyframes-05.png">
<img class="fade-in" src="images/remaining_keyframes-06.png">
<img class="fade-in" src="images/remaining_keyframes-07.png">
<img class="fade-in" src="images/remaining_keyframes-08.png">
<img class="fade-in" src="images/remaining_keyframes-09.png">
</div>
</main>
<script src="js/observer.js"></script>
</body>
</html>
and CSS
.fade-in {
opacity: 0;
transition: opacity 250ms ease-in;
}
.fade-in.appear {
opacity: 1;
}

There are a few issues with your code:
In your HTML you are referring to your js file twice.
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
I also cleaned up how you were calling IntersectionObserver and passing the callback/options.
The error that pops up is apparently a known "non" issue:
ResizeObserver - loop limit exceeded
const faders = document.querySelectorAll('.fade-in');
var appearOptions = {
threshold: 1,
rootMargin: "0px 0px -100px 0px",
};
const appearOnScroll = new IntersectionObserver((entries,
appearOptions) => {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
} else {
entry.target.classList.add('appear');
appearOnScroll.unobserve(entry.target);
}
})
});
faders.forEach(fader => {
appearOnScroll.observe(fader);
})
.fade-in {
opacity: 0;
transition: opacity 250ms ease-in;
}
.fade-in.appear {
opacity: 1;
}
<main>
<h3>Design Studio Project</h3>
<h2>The Most Important Revolutions</h2>
<p>Lauren Miggins</p>
<p>Summer 2020</p>
<div class="videowrapper">
<video controls="controls" width="1920" height="1080"
name="studioProject" type="mov" src="images/web_StudioProject_rd03.mp4"></video>
</div>
<div class="remainingslides">
<img class="fade-in" src="https://via.placeholder.com/800">
<img class="fade-in" src="https://via.placeholder.com/800">
<img class="fade-in" src="https://via.placeholder.com/800">
<img class="fade-in" src="https://via.placeholder.com/800">
<img class="fade-in" src="https://via.placeholder.com/800">
<img class="fade-in" src="https://via.placeholder.com/800">
<img class="fade-in" src="https://via.placeholder.com/800">
<img class="fade-in" src="https://via.placeholder.com/800">
<img class="fade-in" src="https://via.placeholder.com/800">
</div>
</main>

You've added observer.js 2 times on your page. But your other stuff is working for me.
I do not have your images and video, so I removed video for this example and make images to be just a red squares.
Strange, but it is working in Snippet editor, but not in view mode!
Anyway, here is the same in jsfiddle: click.
const faders = document.querySelectorAll('.fade-in');
const appearOptions = {
threshold: 1,
rootMargin: "0px 0px -100px 0px",
};
const appearOnScroll = new IntersectionObserver(function(entries,
appearOnScroll) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
} else {
entry.target.classList.add('appear');
appearOnScroll.unobserve(entry.target);
}
})
},
appearOptions);
faders.forEach(fader => {
appearOnScroll.observe(fader);
})
.fade-in {
opacity: 0;
transition: opacity 250ms ease-in;
}
.fade-in.appear {
opacity: 1;
}
/* Helpers: */
main {
width: 800px;
}
img {
display: inline-block;
border: 1px solid red;
background: red;
min-width: 200px;
min-height: 200px;
}
<main>
<h3>Design Studio Project</h3>
<h2>The Most Important Revolutions</h2>
<p>Lauren Miggins</p>
<p>Summer 2020</p>
<div class="videowrapper">
<!--video controls="controls" width="1920" height="1080"
name="studioProject" type="mov" src="images/web_StudioProject_rd03.mp4"></video-->
</div>
<div class="remainingslides">
<img class="fade-in" src="images/remaining_keyframes-01.png">
<img class="fade-in" src="images/remaining_keyframes-02.png">
<img class="fade-in" src="images/remaining_keyframes-03.png">
<img class="fade-in" src="images/remaining_keyframes-04.png">
<img class="fade-in" src="images/remaining_keyframes-05.png">
<img class="fade-in" src="images/remaining_keyframes-06.png">
<img class="fade-in" src="images/remaining_keyframes-07.png">
<img class="fade-in" src="images/remaining_keyframes-08.png">
<img class="fade-in" src="images/remaining_keyframes-09.png">
</div>
</main>

click handler to enlarge image

I cant change the html or css files. My task is to set a click handler to my thumbnails to enlarge the image in the img within the element. While also setting the figcaption text in the figure to the thumbs title attribute. I need to attach to the div id = thumbnails. My script is not enlarging my thumbnails or titles.
This is what I have so far.
<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="utf-8">
<title>Chapter 9 - Share Your Travels</title>
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/chapter09-project02.js">
document.getElementById("thumbnails").addEventListener("click", function(e) {
if(e.target && e.target.nodeName.toLowerCase == "img") {
// Taking the image src and converting it to medium image.
var srcValue = e.target.src.replace("small","medium");
// Taking title and storing it for later.
var titleValue = e.target.title;
document.getElementById("featured").src = srcValue;
document.getElementById("featured").title = titleValue;
document.getElementById("figcaption").innerHTML = titleValue;
}
});
document.getElementById("figcaption").addEventListener("onmouseover", function(e) {
var figcaption = e.target.style.opacity = .8;
});
document.getElementById("figcaption").addEventListener("onmouseout", function(e) {
var figcaption = e.target.style.opacity = 0;
});
</script>
</head>
<body>
<header>
<h2>Share Your Travels</h2>
<nav><img src="images/menu.png"></nav>
</header>
<main>
<figure id="featured">
<img src="images/medium/5855774224.jpg" title="Battle" />
<figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
<img src="images/small/5855774224.jpg" title="Battle" />
<img src="images/small/5856697109.jpg" title="Luneburg" />
<img src="images/small/6119130918.jpg" title="Bermuda" />
<img src="images/small/8711645510.jpg" title="Athens" />
<img src="images/small/9504449928.jpg" title="Florence" />
</div>
</main>
</body>
</html>

Is something like this what you were after?
var caption = document.getElementsByTagName("FIGCAPTION")[0];
var images = document.getElementsByTagName("IMG");
for (val of images) {
if(images[0] !== val){
val.addEventListener("click", function(e) {
caption.innerHTML = this.title;
images[0].title = this.title;
images[0].src = this.src.replace("small","medium");
});
}
}
img {
width: 100px;
height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="utf-8">
<title>Chapter 9 - Share Your Travels</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header>
<h2>Share Your Travels</h2>
</header>
<main>
<figure id="featured">
<img src="https://cdn.pixabay.com/photo/2018/01/20/14/26/panorama-3094696__340.jpg" title="Battle" />
<figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
<img src="https://cdn.pixabay.com/photo/2018/05/15/09/23/raindrop-3402550__340.jpg" title="Battle" />
<img src="https://cdn.pixabay.com/photo/2018/04/23/14/23/giraffe-3344366__340.jpg" title="Luneburg" />
<img src="https://cdn.pixabay.com/photo/2018/04/20/18/19/grass-3336700__340.jpg" title="Bermuda" />
<img src="https://cdn.pixabay.com/photo/2018/05/12/12/48/mountain-crumpled-3393209__340.jpg" title="Athens" />
<img src="https://cdn.pixabay.com/photo/2018/04/24/19/14/hai-3347787__340.jpg" title="Florence" />
</div>
</main>
</body>
</html>

Drag and drop not working in html

I am using html to drag an image with id ="drag1" to drag and drop it to division with id="div1" and it doesn't work. I already have a division with 4 images and its source code is changing and it's working. Can you please help me fix this problem?
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));
}
setTimeout(fun,15000);
function fun(){ document.getElementById("image1").src="bed1.jpg"
}
setTimeout(fun1,30000);
function fun1(){ document.getElementById("image2").src="bed1.jpg";
}
setTimeout(fun2,6000);
function fun2(){ document.getElementById("image3").src="bed1.jpg";
}
setTimeout(fun3,60000);
function fun3(){ document.getElementById("image4").src="bed1.jpg";
}
setTimeout(fun4,45000);
function fun4(){ document.getElementById("image5").src="bed1.jpg";
}
#div1 {
height: 300px;
padding: 10px;
border: 1px solid #aaaaaa; background-color:white;
}
body {
background: lavender;
}
img {
height: 250px;
width: 230px;
}
<!DOCTYPE html>
<html>
<head>
<title>Drag Image</title>
</head>
<body>
<h1 style="margin-left:100px; margin-top:70px; color:firebrick;font-family:arial; font-size:50px">Medical Care</h1><br />
<img src="gethelp.png" height=100px width=130px style="margin-left:130px;" />
<div style="background-color:white;margin-top:140px;padding:50px;">
<img id="image1" src="bed.jpg">
<img id="image2" src="bed.jpg">
<img id="image3" src="bed.jpg">
<img id="image4" src="bed.jpg">
<img id="image5" src="bed.jpg">
</div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="bed.jpg" draggable="true" ondragstart="drag(event)">
</body>
</html>
Just help me figure out why drag and drop is not working with this code. It is working separately but not in this code.

Hide/Show Buttons

I am trying to make a button for each picture that will hide the other two. For example if I click the button for the left image, the left image will show and it will hide the middle and right pictures. HTML needs to stay the same, any suggestions?
<div id="works">
<figure data-artist="left">
<img src="david.jpg" alt>
<figcaption>left image</figcaption>
</figure>
<figure data-artist="middle">
<img src="david-plaster.jpg" alt>
<figcaption>middle image</figcaption>
</figure>
<figure data-artist="right">
<img src="florence-cathedral.jpg" alt>
<figcaption>Right image</figcaption>
</figure>
</div>
<div id="controls">
</div>
<script>
var hideShowButton = document.getElementById("hideShowButton");
hideShowButton.onclick = function() {
var allImages = { left: "left", center: "middle", right: "right" };
if(document.getElementById("michelangelo").style.visibility == 'visible') {
for (var image in allImages) {
document.getElementById(allImages[image]).style.visibility = 'hidden';
}
document.getElementById("hideShowButton").innerHTML = "Hide";
}
}
</script>

When the button inside div controls is clicked, he execute the function showImage().
This function get all figure elements and set a display as none.
Then we get the attribute data-artist of the element that trigger the function, that is the same as the figure, and add a display style as block on the figure that has the same attribute data-artist that the element.
function showImage(event){
var objClass = event.getAttribute("data-artist");
var elems = document.getElementsByTagName("figure");
for (var i=0;i<elems.length;i++)
elems[i].style.display = 'none';
var element = document.querySelector('figure[data-artist='+objClass+']');
element.style.display = 'block';
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="works">
<figure data-artist="left">
<img src="david.jpg" alt>
<figcaption>left image</figcaption>
</figure>
<figure data-artist="middle">
<img src="david-plaster.jpg" alt>
<figcaption>middle image</figcaption>
</figure>
<figure data-artist="right">
<img src="florence-cathedral.jpg" alt>
<figcaption>Right image</figcaption>
</figure>
</div>
<div id="controls">
<button data-artist="left" onclick="showImage(this);">left</button>
<button data-artist="middle" onclick="showImage(this);">center</button>
<button data-artist="right" onclick="showImage(this);">right</button>
</div>
</body>
</html>

<div id="works">
<figure data-artist="left">
<img src="david.jpg" id="image1" alt>
<figcaption>left image</figcaption>
<button onclick="hideshow('1');">Choose</button>
</figure>
<figure data-artist="middle">
<img src="david-plaster.jpg" id="image2" alt>
<figcaption>middle image</figcaption>
<button onclick="hideshow('2');">Choose</button>
</figure>
<figure data-artist="right">
<img src="florence-cathedral.jpg" id="image3" alt>
<figcaption>Right image</figcaption>
<button onclick="hideshow('3');">Choose</button>
</figure>
</div>
<div id="controls">
</div>
<script>
function hideshow(buttonpressed) {
var img1 = document.getElementById("image1");
var img2 = document.getElementById("image2");
var img3 = document.getElementById("image3");
if(buttonpressed==1) {
img1.style.visibility == 'visible';
img2.style.visibility == 'hidden';
img3.style.visibility == 'hidden';
}
if(buttonpressed==2) {
img1.style.visibility == 'hidden';
img2.style.visibility == 'visible';
img3.style.visibility == 'hidden';
}
if(buttonpressed==3) {
img1.style.visibility == 'hidden';
img2.style.visibility == 'hidden';
img3.style.visibility == 'visible';
}
}
</script>
If there will be many buttons (not 3), approach would be different than this
Hope this helps

resizing image while dragging and dropping in javascript

We're trying to make a school project like an online delivery system.. but it will have a little tweak like drag and drop system and food customization. Like when you drag a sauce to the main image which is a bowl of rice. it would automatically change the image to a rice with sauce. sane as protein veggies and more.
I'm trying to figure out how to change image or adopting it to the main image while i drag and drop it also.. changing some of its attributes in CSS.
Also maybe there's a function that when I drag a specific image it would change the main image to a different image not the dragged one.
function doFirst(){
mypic = document.getElementById('img1');
mypic.addEventListener("dragstart", startDrag, false);
mypictwo = document.getElementById('img2');
mypictwo.addEventListener("dragstart", startDrag2, false);
mypicthree = document.getElementById('img3');
mypicthree.addEventListener("dragstart", startDrag3, false);
mypicfour = document.getElementById('img4');
mypicfour.addEventListener("dragstart", startDrag4, false);
leftbox = document.getElementById("mainbox");
leftbox.addEventListener("dragenter", function(e) {e.preventDefault();}, false);
leftbox.addEventListener("dragover", function(e) {e.preventDefault();}, false);
leftbox.addEventListener("drop", dropped, false);
}
//--------------startDrag FUNCTIONS -----------------------//
function startDrag(e){
var code = '<img id="img1" src="images/image1.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag2(e){
var code = '<img id="img2" src="images/image2.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag3(e){
var code = '<img id="img2" src="images/image4.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag4(e){
var code = '<img id="img2" src="images/image5.jpg">';
e.dataTransfer.setData('Text', code);
}
//--------------startDrag FUNCTIONS -----------------------//
function dropped(e){
e.preventDefault();
leftbox.innerHTML = e.dataTransfer.getData('Text');
var code = '<img id="centerimg" src="images/center.png">';
ondrop
}
function drop(event){
event.preventDefault();
var code = '<img id="img2" src="images/image5.jpg" width="300px" height="300px">' ;
}
window.addEventListener ("load", doFirst, false);
#centerimg{
width:500px;
height: 500px;
}
#img2, #img1, #img3, #img4{
width:150px;
height: 150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="drag.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3" id="1box">
<img id="img1" src="images/image1.jpg">
</div>
<div class="col-md-3" id="2box">
<img id="img2" src="images/image2.jpg">
</div>
<div class="col-md-3" id="3box">
<img id="img3" src="images/image4.jpg">
</div>
<div class="col-md-3" id="4box">
<img id="img4" src="images/image5.jpg">
</div>
</div>
</div>
<div class="row">
<center><div class="col-md-push-4 col-md-4 mainbox" ondrop="drop(event)" id="mainbox">
<img id="centerimg" src="images/center.png">
</div></center>
</div>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Javascript adopting image size when dropped - javascript

Related

Elements not fading in on user scroll

click handler to enlarge image

Drag and drop not working in html

Hide/Show Buttons

resizing image while dragging and dropping in javascript

Categories

Resources