Affilier le nouveau parent après déplacement dynamique d'un div
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:
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> |
re fonctionne sans use strict!!!
re
bon j'ai tout essayé et ton code fonctionne sans le "use strict" mais ca ne résout toujours pas mon problème de sortie d'un div fils d'un div class"divint" vers le div id=éditeur
visiblement atachEvent ou addEventlistener fonctionnent de la même manière donc ca n'est pas trop le soucis
et même au pire je le ferait en DOM1 "element.ondragstart=function(){blablabla}
