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/

voici mon code source :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!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 le nom de la div qui expedie l'lement
  document.getElementById("id_span1").innerHTML = ev.target.id;//   recupere le nom de l'element deplacer
}
 
function dragEndHandler(event) {
 //alert('445');        
//event.target.parentNode.removeChild(event.target);    
    if (event.dataTransfer.dropEffect == 'move') {
      // remove the dragged element
         
      
    }
}
        
 
function drop(ev) {
  
  var data = ev.dataTransfer.getData("text");
  //alert(data);
  //alert(ev.target.id);
  document.getElementById("id_span3").innerHTML = ev.target.id;//   recupere le nom de l'element qui recoit
  
  var parg1 = document.getElementById(ev.target.id);
  if (parg1.hasChildNodes()){
 
          //alert('non vide');
          //ev.stopPropagation();
          //event.target.parentNode.removeChild(event.target);
          }
//document.getElementById("div3") = document.getElementById("div1");  
//document.getElementById("div1").innerHTML ="";
                
          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)" ondragend="dragEndHandler(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>

j'aimerai empeché le drop si la div contient deja une image,le drag and drop fonctionne bien

je peux deplacer le bouton sur un div
je peux deplacer l'autre bouton sur une autre div

mais mon probleme est que je peux aussi deplacer le bouton sur une div qui contient l'autre bouton et a ce moment il reste qu'un seul bouton que je peux deplacer

je souhaiterai empeche de depose sur un div qui contient un bouton

j'ai essayé un bout de code pour voir si il u avait un children dans la div de depot mais il ne tient compte que du code html de depart soit dans la div 1 ou 2

merci pour toute l'aide que vous pourriez m'apporter

bonne journée
Christophe