HTML, JS - drag and drop, match images with div (by ID or smthng)-CodePudding

Im begginer in HTML and JS. I have a question, how can I match (drag and drop it) to a div (box with text)? I've tried matching it with same ID but with no luck. I have to drag and drop an image to a correct dropbox (div)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Game</title>
    <script src="replace_div.js"></script>
</head>
<body>
<script>
    function allowDrop(event) {event.preventDefault();}

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

    function drop(event) {
        event.preventDefault();
        const data = event.dataTransfer.getData("text");
        event.target.appendChild(document.getElementById(data));
    }
</script>

<div >
    <div id="s1" >
        <h3>Level 1</h3>
        <div >
            <div id="l_dropbox1" ondrop="drop(event)"
                 ondragover="allowDrop(event)">Car1</div>

            <div id="l_dropbox2" ondrop="drop(event)"
                 ondragover="allowDrop(event)">Car2</div>

            <div id="l_dropbox3" ondrop="drop(event)"
                 ondragover="allowDrop(event)">Car3</div>
        </div>
        <div  ondrop="drop(event)"
             ondragover="allowDrop(event)">

            <img id="item1" 
                 src="car1.jpg"
                 draggable="true" ondragstart="drag(event)" alt="">

            <img id="item2" 
                 src="car2.jpg"
                 draggable="true" ondragstart="drag(event)" alt="">

            <img id="item3" 
                 src="car3.jpg"
                 draggable="true" ondragstart="drag(event)" alt="">
        </div>
    </div>

CodePudding user response：

You can use a dataset attribute on the elements you wish to allow the drop to be on. In my example I used the id of the drop-able element to correspond to the dataset in the element that matches --> data-allow.

I pass the event.target of the allowDrop function to an empty array. This allows the array to pass to the drop function. We then use a conditional to check the drop event.target against the dragId arrays object dragId[0]. We reset the dragId array back to empty after defining a variable with its value for the conditional. If we get a match run the appendChild function to the event.target with in the drop event.

let dragId = [];

function allowDrop(event) {
  event.preventDefault();
  // lets save the id of element that is being dropped into an array
  dragId.push(event.target.id)
}

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

function drop(event) {
  event.preventDefault();
  // define a veriable wiht the dragged elements id
  let drag_id = dragId[0];
  // lets reset the dragId array back to empty
  dragId = [];
  // conditional to check if the dragId[0].id matches the dataset-allow attribute
  if (drag_id === event.target.dataset.allow) {
    // we have a match run code to appendChild
    const data = event.dataTransfer.getData("text");
    event.target.textContent = '';
    event.target.appendChild(document.getElementById(data));
  }
}

#l_dropbox1, #l_dropbox2, #l_dropbox3 {
  min-height: 2em;
  margin-top: 2px;
  background: #eee;
}

img {
  width: 20%;
}

<div >
  <div id="s1" >
    <h3>Level 1</h3>
    <div >
      <div id="l_dropbox1" data-allow="item1" ondrop="drop(event)" ondragover="allowDrop(event)">Camaro</div>

      <div id="l_dropbox2" data-allow="item2" ondrop="drop(event)" ondragover="allowDrop(event)">Corvete</div>

      <div id="l_dropbox3" data-allow="item3" ondrop="drop(event)" ondragover="allowDrop(event)">Mercedes</div>
    </div>
    <div  ondrop="drop(event)" ondragover="allowDrop(event)">

      <img id="item1"  src="https://external-content.duckduckgo.com/iu/?u=https://tse1.mm.bing.net/th?id=OIP.l0pJ2pMWRocMHgbIZbSzxgHaEo&pid=Api&f=1" draggable="true" ondragstart="drag(event)" alt="">

      <img id="item2"  src="https://external-content.duckduckgo.com/iu/?u=https://tse1.mm.bing.net/th?id=OIP.Jf0_hWklu1z7U7AIH1CvrAHaEh&pid=Api&f=1" draggable="true" ondragstart="drag(event)" alt="">

      <img id="item3"  src="https://external-content.duckduckgo.com/iu/?u=https://tse1.mm.bing.net/th?id=OIP.tP05wu9-DE0_X_Du-Tw1zQHaEK&pid=Api&f=1" draggable="true" ondragstart="drag(event)" alt="">
    </div>
  </div>

CodePudding user response：

Thank you, it works phenomenal.