Affilier le nouveau parent après déplacement dynamique d'un div

**patricktoulon** · 05/09/2016, 11h50

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>

**Watilin** · 07/09/2016, 15h58

Salut,

sous Firefox 48, quand je teste ta page, je ne peux pas déplacer les divs. Du fait de l’attribut contenteditable, quand j’esquisse un glisser-déposer, ça sélectionne du texte, quelle que soit la position du curseur. Et si je fais glisser du texte sélectionné, la console me dit « dragged.style is undefined », ce qui s’explique par le fait que l’objet déplacé est un nœud #text, qui n’a donc pas de propriété style.

J’attire ton attention sur l’âge de la fonction attachEvent : elle n’est nécessaire que jusqu’à IE8. À toi de juger si ça vaut le coup de compliquer son code pour supporter des navigateurs obsolètes. De plus, tu as une balise meta indiquant que ta page est censée être compatible avec IE10.

Je me suis permis de modifier un peu ta page et de passer ton script en mode strict. Attention, tu as des variables non déclarées. Utilise la console F12.

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
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
105
106
<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Patrick WYSIWYG html</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=10">
  <style>
 
#editeur {
  height: 90%;
  min-height: 600px;
  width: 90%;
  border: 1px solid black;
}
#red   { width: 250px; height: 250px; border: 1px solid red;   }
#blue  { width: 200px; height: 200px; border: 1px solid blue;  }
#green { width: 100px; height: 100px; border: 1px solid green; }
 
  </style>
  <script type="text/javascript">
 
'use strict';
 
var Ed = document.getElementById('editeur');
var DX, DY, oX, oY;
var dragged;
var bordure;
 
document.addEventListener('mousemove', WhereMouse);
document.addEventListener('mouseup', drag_onmouseup);
 
function drag_onmouseup(ev) {
  if (dragged) {
    dragged.style.border = bordure;
    X = ev.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
    Y = ev.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';
      } else {
        dragged.style.left = (X - DX) + 'px';
        dragged.style.top  = (Y - DY) + 'px';
      }
    }
    if ('editeur' === obj.id) {
      dragged.style.left = (X - DX) + 'px';
      dragged.style.top  = (Y - DY) + 'px';
    }
  }
  dragged = null;
} //On arrête le drag
 
function dragstart(ev) {
  ev.preventDefault();
  dragged = ev.target;
  bordure = dragged.style.border;
  dragged.style.border = '2px dotted #8258FA';
  X = ev.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
  Y = ev.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
  DX = X - dragged.offsetLeft;
  DY = Y - dragged.offsetTop;
}
 
function WhereMouse(ev) {
  if (dragged != null) {
    Mouse_X = ev.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
    Mouse_Y = ev.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>
</head>
<body>
  <button>Ajouter un div</button>
 
  <div id="editeur" contenteditable="true">
    <p>Du texte dans l’éditeur</p>
    <div id="red" class="divint"><p>Du texte dans mon div</p></div>
    <div id="blue" class="divint"><p>Du texte dans celui-ci</p></div>
    <div id="green" class="divint"><p>Celui-là aussi</p></div>
  </div>
 
  <script type="text/javascript">
 
  'use strict';
 
  document.getElementById('red'  ).addEventListener('dragstart', dragstart);
  document.getElementById('blue' ).addEventListener('dragstart', dragstart);
  document.getElementById('green').addEventListener('dragstart', dragstart);
  document.querySelector('button').addEventListener('click', insertdiv);
 
  </script>
</body>
</html>

**patricktoulon** · 07/09/2016, 16h08

Bonjour Watilin et merci pour ce retour

J’attire ton attention sur l’âge de la fonction attachEvent : elle n’est nécessaire que jusqu’à IE8. À toi de juger si ça vaut le coup de compliquer son code pour supporter des navigateurs obsolètes. De plus, tu as une balise meta indiquant que ta page est censée être compatible avec IE10.

oui alors :
j'ai oublié de preciser comme dans mes derniers post a se sujet que le WYSIWYG va etre implanter dans le document d'un control OCX(Webbrowser) dans un userform en vba excel

malheureusement ce control n'a pas évolué d'un yota depuis Excel 2003 ce qui implique que tout ce qui ne fonctionne pas avec IE 8/9 ne fonctionnera pas avec le webbrowser

la balise meta m'aide a faire accepter certaines chose mais pas tout après oui attachevent n'est pas nécessaire j'en convient

mais avant tout le wysiwyg est destiné pour un document coder pour IE 9/10 car se sont les seules possibilité que j'ai

je vais tester ton code pour me faire une idée

merci pour le retours

EDIT:

apres test c'est bien ce que je pensais dans un fichier html local ca ne fonctionne pas avec IE11 ca fonctionnera encore moins avec mon webbrowser

fait le test de ton code avec IE tu verra

**Watilin** · 07/09/2016, 16h36

Au moins tu connais l’environnement cible, c’est à moitié une bonne nouvelle. Du coup ça te permet d’utiliser systématiquement attachEvent et d’oublier addEventListener, non ?

J’ai IE11 sous la main, je vais faire quelques tests.

**patricktoulon** · 07/09/2016, 16h47

re

Au moins tu connais l’environnement cible, c’est à moitié une bonne nouvelle. Du coup ça te permet d’utiliser systématiquement attachEvent et d’oublier addEventListener, non ?

et oui mais non le webbrowser(OCX) selon les version de excel va répondre comme IE9 ou 10 ou 11

pourquoi?:

et bien parce que le webbrowser est une photocopie de l'explorateur IE9 plus ou moins

seulement certaine fonctions DOM sont absente alors on manipule le document!!!!! de l'object avec les librairie de IE installée (présentes dans le pc) selon le choix de l'utilisateur

donc si l'utilisateur a IE 11 il a tout donc avec la balise meta compatible je monte jusqu'à edge ce qui me donne pratiquement tout de IE10 et un peu IE11

par contre si l'utilisateur comme beaucoup n'ont que IE 9 d'installé je serais limité

je n'ai pas eu de retour encore avec le webbroser et IE 09 d'installé je ne sais pas si je peut abandonner attachEvent

j'ai comparé ton code au mien il n'est pas très différents du mien si ce n'est qu'il est certainement plus propre

les expression de comparaison diffèrent un peu ca vient de la peut etre ???? !== chez toi != chez moi

**patricktoulon** · 07/09/2016, 17h11

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}

Affilier le nouveau parent après déplacement dynamique d'un div

JavaScript

Vue hybride

Discussions similaires

Partager

Partager