Bonjour a tous

je cherche a affilier le parent a un div après son déplacement dynamique avec la souris
un peu comme avec ondrag/ondrop seulement je ne peut pas utiliser ces deux fonctions car le div déplacé est juste en dessous le curseur donc le drop ne peut pas fonctionner

donc je déplace mes divs a volonté et des que le div en déplacement (left et top )correspondent a un endroit a l'intérieur d'un autre div
le div déplacé doit devenir l'enfant de celui ci et cela a volonté

de la même manière si je déplace un div qui est déjà enfant d'un autre en le déplaçant il doit devenir l'enfant de celui a qui correspond la condition left et top
c'est sur ce point que je bloque
en effet dans l'exemple ci dessous on place le bleu dans le rouge ,le vert dans le bleu ca fonctionne , quand on déplace le rouge après tout les divs bouge avec
par contre c'est des que je sort le bleu du rouge ou le vert du bleu ca déraille

si vous avez une idée je suis preneur
merci d'avance
voila le code actuel
Code : 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
<!DOCTYPE HTML>
<html>
  <head>
   <title>patrick WYSIWYG html </title>
   <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=10"> 
<style>
</style>
<script  type= "text/javascript">
var Ed=document.getElementById("editeur");
var DX,DY,oX,oY;
var dragged;
var bordure;
typeof window.addEventListener == 'undefined' ? document.attachEvent("onmousemove",WhereMouse) : document.addEventListener('mousemove',WhereMouse,false);
typeof window.addEventListener == 'undefined' ? document.attachEvent("onmouseup",drag_onmouseup) : document.addEventListener('mouseup',drag_onmouseup,false);
function drag_onmouseup(ev) {
if (dragged!=null){ 
dragged.style.border=bordure;
X= event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);Y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
var obj=document.elementFromPoint(oX,oY);     //oX et oY sont calculés dans le mousemove 
var par=dragged.parentElement;
 
if (par.id!=obj.id){
obj.appendChild(dragged);
if(obj.id!="editeur"){dragged.style.left="30px";dragged.style.top="30px";obj.style.left=obj.offsetLeft+1+"px";}
if (obj.id=="editeur"){dragged.style.left=X-DX+"px";dragged.style.top=Y-DY+"px";}
 
}
if (obj.id=="editeur"){dragged.style.left=X-DX+"px";dragged.style.top=Y-DY+"px";}
}
dragged=null
 
}  //On arrête le drag}
 
function dragstart(ev) {
 
dragged=ev.target; bordure= dragged.style.border;
dragged.style.border="2px dotted #8258FA";
X= event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);Y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
DX=0;DY=0; DX=X-dragged.offsetLeft; DY=Y-dragged.offsetTop;event.returnValue = false; if( event.preventDefault ) event.preventDefault();
}
 
function WhereMouse( ){
if(dragged!=null){
Mouse_X= event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);Mouse_Y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
Mouse_X-= DX;Mouse_Y-= DY;   dragged.style.left = Mouse_X  + 'px';    dragged.style.top = Mouse_Y + 'px';    dragged.style.position="absolute"; oX=Mouse_X-10; oY=Mouse_Y+5;  }
}
 
</script>
<body>
 <button  onclick="insertdiv()"> ajouter un div </button>
 <div  id="editeur"contenteditable="true" style="height: 90%; min-height:600px;width: 90%;border:1px solid black;">
 <p> du texte dans l'editeur</p>
 
     <div  id="red" class="divint" ondragstart="dragstart(event)"  style="width:250px;height:250px;border:1px solid red;" ><p> du texte dans mon div </p></div>
 
<div  id="blue" class="divint" ondragstart="dragstart(event)"style="width:200px;height:200px;border:1px solid blue;" ><p>du texte dans celui ci </p></div>
            <div  id="green" class="divint" ondragstart="dragstart(event)"style="width:100px;height:100px;border:1px solid green;" ><p>celui la aussi   </p></div>
 
 
 
</div>
</body>