0

I'm trying to drag images to one div. But one img takes the whole space and not allowing to drop another img.

Here is how my code looks :

HTML

<div id="main">
            <div id="pallet">
                <img src="css/images/one.jpg" alt="" draggable="true">
                <img src="css/images/two.jpg" alt="" draggable="true">
                <img src="css/images/three.jpg" alt="" draggable="true">
                <img src="css/images/four.jpg" alt="" draggable="true">
            </div>
            <div id="layout">
                <div class="dropzone"></div>
                <div class="dropzone"></div>
                <div class="dropzone"></div>
                <div class="dropzone"></div>
            </div>
        </div>

JS

listener("drop", (event) => {
  console.log("drop !");
  event.preventDefault();
  if (event.target.className === "dropzone") {
    dragged.parentNode.removeChild(dragged);
    return event.target.appendChild(dragged);
  }
});
April
  • 1
  • You are likely dropping the second image not in the `dropzone`, but in its child `img` (the first one that got dropped in `dropzone`). You can use syntax like [addEventListener(type, listener, true)](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#syntax) to make it captured by the correct target. You can read more about it [on event bubbling and capturing thread](https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing). – cSharp Jun 21 '22 at 01:53
  • Maybe you can use css to reduce the child image's height and width small so there is space left to drop more or maybe just show the image name instead of whole image. – Rohit Mahto Jun 21 '22 at 01:58
  • @cSharp the thing is it allows to drop the 2nd image if the 1st image width is not taking up the whole space. But the first drop needs to cover the whole div. I'm not sure how to make the first image shrink when the second image is dropping. – April Jun 21 '22 at 03:27
  • Try logging what's the `event.target` outside of the `event.target.className === "dropzone"`, I suspect it will be the image. If that's the case, you have to capture the event like I suggested in the correct target. – cSharp Jun 21 '22 at 06:00
  • @cSharp I logged even.target outside and it's still "dropzone" – April Jun 21 '22 at 14:05

0 Answers0