Empêcher le drop dans une div non vide

**chris45** · 15/01/2023, 11h22

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

**chris45** · 16/01/2023, 21h25

Personne pour m'aider, me proposée une idée a creuser...

et si j'utilisai AJAX

deplacer avec drag and adrop mais modifier la div de reception avec code ajax?....

bonne soirée
Christophe

**OButterlin** · 16/01/2023, 23h26

Comme c'est un problème javascript et non java, je vous ai déplacé la discussion sur le forum adapté.

**mathieu** · 17/01/2023, 03h32

le souci est que les sauts de lignes sont considérés comme des éléments enfants.
et ensuite il faut aussi tester si on essaye de déposer une image sur une autre au lieu de la déposer dans une zone vide :
https://jsfiddle.net/bp2u3mkz/

**SpaceFrog** · 17/01/2023, 10h30

Les éléments enfants sont ils différentiables de par une class par exemple, il suffirait alors de compter les enfants significatif (cela exclurait les retours ligne ...)

**NoSmoking** · 17/01/2023, 16h13

Bonjour,

Envoyé par mathieu

le souci est que les sauts de lignes sont considérés comme des éléments enfants.

on peut également utiliser childElementCount ou encore children.length qui nous indiquent le nombre de « vrais noeuds », autres que #text ou comment.

**chris45** · 18/01/2023, 18h33

Envoyé par mathieu

le souci est que les sauts de lignes sont considérés comme des éléments enfants.
et ensuite il faut aussi tester si on essaye de déposer une image sur une autre au lieu de la déposer dans une zone vide :
https://jsfiddle.net/bp2u3mkz/

Super ton code fonction bien

je n'avait pas pensé à bloquer le fait de deplacer sur l'image, juste la div

merci encore pour avoir pris du temps pour m'aider

j'avais essayer un autre code en utilsant une recuperation du code html de la div en mettant un nom de class different pour chaque div ( nom du tag id) via jquery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
var contenu = $('div.'+div_destination).html()
if (contenu==""){
  document.getElementById(div_source).innerHTML ="";
 document.getElementById(div_destination).innerHTML ='<img src="button.png" draggable="true" ondragstart="drag(event)" ondragend="dragEndHandler(event)" name="drag1"  id="drag1" width="88" height="31">'; 
}
else {// non vide}

bonne journée

Christophe

Empêcher le drop dans une div non vide

JavaScript

Discussions similaires

Partager

Partager