Empêcher 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/
voici mon code source :
Code:
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
