Forum : empecher le drop dans une div non vide

bonjour,
j'au fait un petit code avec 5 div, dans les deux premieree j'ai mis une image que je peut deplacer dans chaque div.

je vous ai mis un lien pour test mon code

[https://jsfiddle.net/arawn45/9hu1qstk/5/]

<!DOCTYPE HTML>
<html>
<head>
<style>
.div1 {
  float: left;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

.border  {
transition: .5s ease;
}

#div2:hover{

border: 1px solid red;
}
</style>
<script>
function allowDrop(ev) {
    //alert(ev.target.id);
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
  //alert(ev.target.id);
  document.getElementById("id_span2").innerHTML = ev.target.parentNode.id;//   recupere l'id de l'element deplacer
  document.getElementById("id_span1").innerHTML = ev.target.id;//   recupere l'id de l'element deplacer
}

function drop(ev) {

  var data = ev.dataTransfer.getData("text");
  //alert(data);
  //alert(ev.target.id);
  document.getElementById("id_span3").innerHTML = ev.target.id;//   recupere l'id de l'element qui recoit

  // fonction de test --ne fonctionne pas : empeche bien de deplacer l'image mais seulement sur la div qui 
  // contenait une image a l'ouverture de la page, pas si l'image a été deplacée plusieur fois

  var parg1 = document.getElementById(ev.target.id);
  if (parg1.hasChildNodes()){
    alert('non vide');
        //ev.preventDefault();
       //ev.target.appendChild(document.getElementById(data));
  }

      ev.preventDefault();
      ev.target.appendChild(document.getElementById(data));

}
</script>
</head>
<body>

<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

<div  class="div1 border"  id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="button.png" draggable="true" ondragstart="drag(event)" name="drag1"  id="drag1" width="88" height="31">
</div>

<div  class="div1 border" id="div2" name="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="button.png" draggable="true" ondragstart="drag(event)" name="drag2" id="drag2" width="88" height="31">
</div>
<div  class="div1 border" id="div3" name="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div  class="div1 border" id="div4" name="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div  class="div1 border" id="div5" name="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div  class="div1 border"  ondrop="drop(event)" ondragover="allowDrop(event)">
</div>

<div  class="div1 border"  ></div>

<br>
<label>id element deplacé</label><span id="id_span1"></span>
<br>
<label>id element source</label><span id="id_span2"></span>
<br>
<label>id element destination : </label><span id="id_span3"></span>
<br>
</body>
</html>

Ce que je veux
et j'aimerai empeché le drop si la div contient deja une image

Ce que j'obtiens

mon probleme c'est que je peux aussi mettre toute les image dans une meme div

je vous remerci enormement de l'aide que vous pourriez m'apporter,

Christophe

empecher le drop dans une div non vide

1 réponse