Javascript Arrastar somente para div vazia

guhbrj · 9 de junho de 2019

Pessoal, estou com dificuldade pra fazer com que seja possível movimentar uma imagem apenas para uma div vazia. podem me ajudar ? aqui está o código.

<!DOCTYPE HTML>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="CSS\main.css">
  <style>
    #div1 {
      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));
      cai.play();
    }
    function psound() {
      select.play();

    }
  </script>
</head>

<body style="margin: 0px;">

  <audio id="cai" src="sound/cai.mp3"></audio>
  <audio id="select" src="sound/select.mp3"></audio>
  <audio id="error" src="sound/error.mp3"></audio>

  <figure>
    <img src="img\pikachu.jpg" width="400" height="300" style="float: rigth;">
  </figure>

  <div style="border: solid black 1px; width: 769px; height:432px; float:left;">
    <div id="img1" class="pecas" ondragstart="drag(event)" ondragover="allowDrop(event)" ondrop="drop(event)"
      onmousedown="psound()">
      <figure id="frag"><img id="drag1" src="img/1.jpg"></figure>
    </div>
    <div id="img2" class="pecas" ondragstart="drag(event)" ondragover="allowDrop(event)" ondrop="drop(event)"
      onmousedown="psound()">
      <figure id="frag"><img id="drag2" src="img\2.jpg"></figure>
    </div>
    <div id="img3" class="pecas" ondragstart="drag(event)" ondragover="allowDrop(event)" ondrop="drop(event)"
      onmousedown="psound()">
      <figure id="frag"><img id="drag3" src="img\3.jpg"></figure>
    </div>
    <div id="img4" class="pecas" ondragstart="drag(event)" ondragover="allowDrop(event)" ondrop="drop(event)"
      onmousedown="psound()">
      <figure id="frag"><img id="drag4" src="img\4.jpg"></figure>
    </div>
    <div id="img5" class="pecas" ondragstart="drag(event)" ondragover="allowDrop(event)" ondrop="drop(event)"
      onmousedown="psound()">
      <figure id="frag"><img id="drag5" src="img\5.jpg"></figure>
    </div>
    <div id="img6" class="pecas" ondragstart="drag(event)" ondragover="allowDrop(event)" ondrop="drop(event)"
      onmousedown="psound()">
      <figure id="frag"><img id="drag6" src="img\6.jpg"></figure>
    </div>
    <div id="img7" class="pecas" ondragstart="drag(event)" ondragover="allowDrop(event)" ondrop="drop(event)"
      onmousedown="psound()">
      <figure id="frag"><img id="drag7" src="img\7.jpg"></figure>
    </div>
    <div id="img8" class="pecas" ondragstart="drag(event)" ondragover="allowDrop(event)" ondrop="drop(event)"
      onmousedown="psound()">
      <figure id="frag"><img id="drag8" src="img\8.jpg"></figure>
    </div>
    <div id="img9" class="pecas" ondragstart="drag(event)" ondragover="allowDrop(event)" ondrop="drop(event)"
      onmousedown="psound()">
      <figure id="frag"><img id="drag9" src="img\9.jpg"></figure>
    </div>
    <div id="img10" class="pecas" ondragstart="drag(event)" ondragover="allowDrop(event)" ondrop="drop(event)"
      onmousedown="psound()">
      <figure id="frag"><img id="drag10" src="img\10.jpg"></figure>
    </div>
    <div id="img11" class="pecas" ondragstart="drag(event)" ondragover="allowDrop(event)" ondrop="drop(event)"
      onmousedown="psound()">
      <figure id="frag"><img id="drag11" src="img\11.jpg"></figure>
    </div>
    <div id="div13" class="pecas" ondrop="drop(event)" ondragover="allowDrop(event)" ondragstart="drag(event)"
      onmousedown="psound()"></div>

  </div>


</body>

</html>

guhbrj · 11 de junho de 2019

Resolvido ! ^^

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

  function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text"); // data é a div que esta sendo arrastada
   var res = data.split("drag", 2);
   var tanam = document.getElementById(ev.target.id);
    alert(tanam.id); //div que recebe 
    alert(data)
    if(!ev.target.src){
        
      ev.target.appendChild(document.getElementById(data));
      cai.play();

    }else{
      
      error.play();
    }