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>

are you looking for something like this - https://codepen.io/nagasai/pen/MLOoKV — Naga Sai A, Feb 06 '19 at 22:25
yes , as in question to 70px, https://codepen.io/nagasai/pen/MLOoKV — Naga Sai A, Feb 06 '19 at 22:43
I meant set the height at default then auto adjust when inserting the image, width of each box is limited. — Yzak, Feb 06 '19 at 22:47
you want the height to be adjusted and not the width or both? should the width be adjusted down or more than the given i.e `350px`? or you just want to show a placeholder in the start only and once the image is dropped the width and height can both adjust? — Muhammad Omer Aslam, Feb 06 '19 at 22:59
I want the div to be set large then when image are inserted it will adjust.. — Yzak, Feb 06 '19 at 23:00

score 1 · Answer 1 · answered Feb 06 '19 at 23:09

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)">

answered Feb 06 '19 at 23:09

Muhammad Omer Aslam

22,976
9
42
68

there's one problem if these images are added on the same box, one disappears. – Yzak Feb 07 '19 at 15:52
@Yzak are you saying that you want to drop all the images in the same div too? i never knew that . – Muhammad Omer Aslam Feb 07 '19 at 17:45
@Yzak the reason is because the target element is not the same as the first time, rather than the `div` the image object is passed and the new image is appended as a child of the existing image rather than the drop zone div or the parent div , that is a known issue and you can see [this](https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element) post for how to fix it in cross browser by looking at the answer by **Diego T. Yamaguchi** – Muhammad Omer Aslam Feb 07 '19 at 18:35
this is noted thanks, anyway will the script itself have issue on cross browsers as well? – Yzak Feb 07 '19 at 19:36
sorry @Yzak, didn't get what you meant by **script itself have an issue on cross browsers as well** which script are you talking about here?. – Muhammad Omer Aslam Feb 07 '19 at 19:39
it was never mentioned anywhere that you require this script to be working on mobile too. @Yzak – Muhammad Omer Aslam Feb 20 '19 at 20:00

HTML5 Drag and Drop Make Div Adjust when Transferred

1 Answers1