HTML5 Drag and Drop Make Div Adjust when Transferred

Question

I currently have a drag and drop feature that transfer the image into three divs, the problem I have is how can the div dimension adjust to the image that was inserted to it, so all image can fit in just one box..

Also is it possible to append just the alt of each image so everybody fits?

<!DOCTYPE HTML>
<html>
<head>
<style>
div {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>


<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
  <img id="drag2" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
  <img id="drag3" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">


</body>
</html>

Answer 1

You can set the div dimensions once the image is dropped using the javascript, just removed the padding from the css so that the div can fit with the image, see below

 function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { //console.log(ev.target.id) ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); var img = document.getElementById(data); ev.target.appendChild(img); //set the div width & height aacording to the image width ev.target.style.width = parseInt(img.width) + 'px'; ev.target.style.height = parseInt(img.height) + 'px'; }

 div { border: 1px solid #aaaaaa; width: 350px; height: 70px; }

 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br/> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br/> <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=336&q=69" draggable="true" ondragstart="drag(event)"> <img id="drag2" src="https://images.pexels.com/photos/33053/dog-young-dog-small-dog-maltese.jpg?auto=compress&cs=tinysrgb&dpr=2&w=336&h=69" draggable="true" ondragstart="drag(event)"> <img id="drag3" src="https://images.pexels.com/photos/257540/pexels-photo-257540.jpeg?auto=compress&cs=tinysrgb&h=69&w=336" draggable="true" ondragstart="drag(event)">

HTML5 Drag and Drop Make Div Adjust when Transferred

Question

1 answers

solution1
0 2019-02-06 23:09:36

HTML5 Drag and Drop Make Div Adjust when Transferred

Question

1 answers

solution1 0 2019-02-06 23:09:36

solution1
0 2019-02-06 23:09:36