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

**Watilin** · 08/09/2016, 17h33

Salut, j’ai eu des problèmes de connexion, je n’ai pas pu répondre plus tôt, désolé.

Voilà le code auquel je suis arrivé avec la dernière version que tu as publiée. Il n’est pas complètement à jour vu qu’il n’intègre pas les solutions apportées par EddiGordo, mais ça va peut-être t’apporter quelques éclaircissements sur certains points de la syntaxe JS qui, admettons-le, n’est pas toujours limpide.

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="fr">
  <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>
 
#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 DX, DY, oX, oY;
var newparent;
var oldparent;
var dragged;
var bordure;
var code;
var Ed, html, body;
 
window.attachEvent('onload', function (ev) {
  Ed = document.getElementById('editeur');
  html = document.documentElement;
  body = document.body;
 
  document.getElementsByTagName('button')[0].attachEvent('onclick', insertdiv);
  document.getElementById('red'  ).attachEvent('ondragstart', dragstart);
  document.getElementById('blue' ).attachEvent('ondragstart', dragstart);
  document.getElementById('green').attachEvent('ondragstart', dragstart);
});
 
document.attachEvent('onmousemove', WhereMouse);
document.attachEvent('onmouseup', drag_onmouseup);
 
// FONCTION QUI ARRÊTE LE DÉPLACEMENT ET AJUSTE LA POSTION /////////////////////
 
function drag_onmouseup(ev) {
  var X = ev.clientX + html.scrollLeft + body.scrollLeft;
  var Y = ev.clientY + html.scrollTop  + body.scrollTop;
  if (dragged) {
    dragged.style.border = bordure;
    if (newparent && oldparent !== newparent) {
      newparent.appendChild(dragged);
      var rect = newparent.getBoundingClientRect();
      if (newparent && newparent !== Ed) {
        dragged.style.left = (X - DX - rect.left) + 'px';
        dragged.style.top  = (Y - DY - rect.top ) + 'px';
      }
      if (newparent && newparent === Ed) {
        dragged.style.left = (X - DX) + 'px';
        dragged.style.top  = (Y - DY) + 'px';
      }
      dragged.style.border = bordure;
    }
  }
  oldparent = null;
  newparent = null;
  dragged = null;
  bordure = null;
} //On arrête le drag
 
// FONCTION QUI DÉMARRE LE DRAG ////////////////////////////////////////////////
 
function dragstart(ev) {
  ev.returnValue = false;
  if ('function' === typeof ev.preventDefault) ev.preventDefault();
  dragged = ev.target || ev.srcElement;
  bordure = dragged.style.border;
  oldparent = dragged.parentNode;
  dragged.style.border = '2px dotted #8258FA';
  var X = ev.clientX + html.scrollLeft + body.scrollLeft;
  var Y = ev.clientY + html.scrollTop  + body.scrollTop;
  DX = X - dragged.offsetLeft;
  DY = Y - dragged.offsetTop;
}
 
// FONCTION QUI DÉPLACE LE DIV /////////////////////////////////////////////////
 
function WhereMouse(ev) {
  if (dragged) {
    var Mouse_X = ev.clientX + html.scrollLeft + body.scrollLeft - DX;
    var Mouse_Y = ev.clientY + html.scrollTop  + body.scrollTop  - DY;
    dragged.style.left = Mouse_X + 'px';
    dragged.style.top  = Mouse_Y + 'px';
    dragged.style.position = 'absolute';
    var rect = dragged.getBoundingClientRect();
    oX = rect.left - 10;
    oY = rect.top;
    newparent = document.elementFromPoint(oX, oY);
  }
}
 
////////////////////////////////////////////////////////////////////////////////
 
function insertdiv(ev) {
 
  // STUB
 
}
 
</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>
</body>
</html>

N’hésite pas à poser des questions

**EddiGordo** · 08/09/2016, 17h40

C'est bizarre, je n'ai pas du tout le même problème, de mon côté c'est propre...

Nom : nobug_5.gif
Affichages : 199
Taille : 27,6 Ko

**patricktoulon** · 08/09/2016, 17h46

Bonjour Walitin

alors oui plein de question
tout d abords je constate que mon model c'est celui que tu a suivi et ne génère pas d'artefacts pourquoi????

peut parce que j'utilise les évènement mouse du document ??????

question 2
dans la fonction dragstart
ceci: veut dire quoi???

Code :

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

 if ('function' === typeof ev.preventDefault) ev.preventDefault();

ou bien encore ceci:

Code :

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

dragged = ev.target || ev.srcElement;

et oui il manque les modifications de Eddigordo quand au repositionnement

et dire que je dois faire la même chose pour les éléments "<img>

mais dans un contexte différent

**Watilin** · 08/09/2016, 20h37

Envoyé par patricktoulon

Bonjour Walitin

alors oui plein de question
tout d abords je constate que mon model c'est celui que tu a suivi et ne génère pas d'artefacts pourquoi????

peut parce que j'utilise les évènement mouse du document ??????

Je n’en ai aucune idée

[quote]question 2
dans la fonction dragstart
ceci: veut dire quoi???

Code :

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

if ('function' === typeof ev.preventDefault) ev.preventDefault();

C’est une vérification un peu plus poussée que le if (ev.preventDefault) ev.preventDefault();. Je regarde le typeof de ev.preventDefault et si ça correspond à 'function', j’ai la garantie que je vais pouvoir l’invoquer. Ce n’est pas vraiment nécessaire, j’en conviens.

ou bien encore ceci:

Code :

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

dragged = ev.target || ev.srcElement;

Les versions d’IE les plus vieilles ne mettent pas de propriété target sur leurs objets event ; à la place, ils mettent srcElement. L’opérateur || peut être interprêté comme un « ou bien » : si target n’existe pas, le script utilisera srcElement à la place. Lire : dragged = ev.target « ou bien » ev.srcElement.
Note que je ne suis pas sûr qu’il y ait un scénario dans lequel target n’est pas supporté, mais dans le doute, mieux vaut prévenir le problème.

**patricktoulon** · 09/09/2016, 11h06

RE
Bonjour Watilin
OK c'est pigé pour le srcelements ( je garde) pour l'autre c'est encore un peu flou mais je potasserais

par contre j'ai plein de bizarrerie qui se produisent

tout d'abords j'ai remis la fonction inserdiv qui normalement encapsule le texte sélectionné en lui même si il y a sélection de texte ou insertion de div tout court dans le document

ca ne le fait plus

ensuite j'ai des sursaut on dirait que les variables DX,DY,FX,FY ne sont pas prises en compte

alors après regard dans l'inspecteur des fois le div déplacé devient l'enfant du body (comment empêcher cela )

ensuite toujours des soucis d'artefact c'est monstrueux des fois
voila le code de la page complet

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
 
<!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 ;
   var DX,DY,oX,oY, fX, fY;
   var newparent;
   var oldparent;
   var dragged;
   var bordure;
   var code;
   //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);
   document.addEventListener('mousemove',WhereMouse,false);
   document.addEventListener('mouseup',drag_onmouseup,false);
   //document.addEventListener('mousedown',Mdown,false);
 
                                                   /////////////////////////////////////////////////////////////////////////////FONCTION QUI ARRETE LE DEPLACEMENT ET AJUSTE LA POSTION //////////////////////////////////////////////////
   function drag_onmouseup(ev)
   {
    if (dragged != null)
    { 
        dragged.style.border = bordure;
     var rect = dragged.getBoundingClientRect();
     oX = rect.left -9;
     oY = rect.top;
     newparent = document.elementFromPoint(oX, oY);
     if (newparent != null && oldparent.id != newparent.id)
     {
      newparent.appendChild(dragged);
                                                                                                dragged.style.border = bordure;
      var rP = newparent.getBoundingClientRect();
      var rX = ev.clientX - rP.left;
      var rY = ev.clientY - rP.top;
 
      dragged.style.left = rX - fX + "px";
      dragged.style.top = rY - fY + "px";
 
      oldparent = null;
      newparent = null;
     }
     dragged = null;
    }
 
                                               }  //On arrête le drag}
 
   ////////////////////////////////////////////////////////////////////////////FONCTION QUI DEMARRE LE DRAG //////////////////////////////////////////////////////////
   function dragstart(ev)
   {
    dragged = ev.target;
    bordure = dragged .style.border;
    oldparent = dragged.parentElement;
    dragged.style.border = "2px dotted #8258FA";
    fX = ev.offsetX;
    fY = ev.offsetY;
    X = ev.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
    Y = ev.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
    DX = 0;
    DY = 0; 
    DX = X - dragged.offsetLeft;
    DY = Y - dragged.offsetTop;
    ev.stopPropagation();
                                                                ev.returnValue = false;
    if (ev.preventDefault) ev.preventDefault();
 
                                                 }
 
   ///////////////////////////////////////////////////////////////////FONCTION QUI DEPLACE LE DIV //////////////////////////////////////////////////////////////
   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";
    }
         }
   /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
function insertdiv(){
var divid="div"+document.getElementsByTagName("div").length;    
 var selection = selectionne_text();
 
                          var selectedText = selection.extractContents();
                          var balise = document.createElement('div');
                          balise.className="divint";
                          balise.id=divid;
                          balise .style.width=200+"px";   
                          balise .style.height=200+"px";
                          balise.style.position="absolute";
                          balise.style .border=1+"px solid black";
                         if (selection!=""){balise.appendChild(selectedText ); }//else{   balise.innerHTML="<p>&nbsp;</p>";}
 
 
                                                         // balise.ondragstart = function ()   { dragstart();  } ///DOM 0    
 
                             selection.insertNode(balise);
 
       var codediv=document.getElementById("editeur").innerHTML;
       document.getElementById("editeur").innerHTML=codediv.replace(balise.outerHTML, "<p></p>"+ balise.outerHTML +"<p></p>");             
       var mydiv= document.getElementById(divid);
       //document.getElementById("editeur").appendChild(mydiv);
       mydiv.addEventListener("dragstart",dragstart,false);
 }
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function selectionne_text() {return window.getSelection().getRangeAt(0);}                     
////////////////////////////////////////////////////////////////////////////////</script>
 </head>
 <body>
  <button onclick="insertdiv()"> ajouter un div </button>
  <div id="editeur" style="border: 1px solid black; width: 90%; height: 90%; min-height: 600px;" contenteditable="true">
<p> du texte dans l'editeur<p></p><p></p><p></p>
 
    <div class="divint" id="blue" style="border: 1px solid blue; left: 92.8px; top: 194.79px; width: 200px; height: 200px; position: absolute;" ondragstart="dragstart(event)">
       <p>du texte dans celui ci</p>
    </div>
 
    <div class="divint" id="red" style="border: 1px solid red; left: 663.79px; top: 171px; width: 250px; height: 250px; position: absolute;" ondragstart="dragstart(event)">
       <p>du texte dans mon div</p>
   </div>
   <div class="divint" id="green" style="border: 1px solid green; left: 406.79px; top: 134.51px; width: 100px; height: 100px; position: absolute;" ondragstart="dragstart(event)">
       <p>celui la aussi</p>
   </div>
</div>
 </body>
</html>

merci les gars pour votre patience perso je reconnais que je suis moins pédagogue mes apprentis m'appelle le bourreau

démo en image

Nom : demo2.gif
Affichages : 184
Taille : 989,8 Ko

**Watilin** · 09/09/2016, 16h31

Salut,

un mot à propos des comparaisons. JavaScript distingue les comparaisons strictes (=== et !==), qui comparent les types en plus de comparer les valeurs, et les comparaisons non strictes (== et !=). En comparaison non stricte, toute valeur équivalente à false est considérée comme false. Cela inclut le nombre 0, le nombre NaN, la chaîne vide '', les valeurs null et undefined, et bien sûr la valeur false elle-même.

Ainsi, les expressions suivantes sont toutes équivalentes :

Code :

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

1
2
3
4
5
maVariable != ''
maVariable != null
maVariable != false
!!maVariable
maVariable

Dans ton code, le test if (dragged != null) est équivalent à if (dragged), et le test if (selection != '') est équivalent à if (selection). Ça peut poser problème si selection a une valeur équivalente à true mais n’est pas une chaîne.

En l’occurence, ta fonction selectionne_text renvoie un objet Range qui n’est donc pas une chaîne. En remontant cette piste, tu trouveras pourquoi, parfois, le texte n’est pas gardé lors de l’ajout d’une div. Remarque aussi que la méthode selection.extractContents() n’est implémentée qu’à partir d’IE9 (source).

Pour les artefacts, ça ressemble à un bug du moteur d’affichage, je ne crois pas que ça ait quelque chose à voir avec JS. Je n’ai pas pu reproduire le phénomène chez moi.

Pour éviter que tes divs soient ajoutées au body, ajoute simplement un test if pour le cas où l’élément renvoyé par elementFromPoint est le body.

Pour les sursauts, ça vient peut-être du fait que tu utilises offsetX au lieu de clientX. Je dois avouer que je n’ai pas creusé la question.

Encore une chose : pour assurer la compatibilité de stopPropagation sur les vieux IE, ajoute ev.cancelBubble = true.

**patricktoulon** · 09/09/2016, 18h32

re
Bonsoir Watilin

tu vois c'est assez étonnant dans mon webbroser le div englobe bien le texte sélectionné
c'est un truc qui me rend fou ca

bon de toute façon c'est retour case départ la version de Eddigordo ne fonctionne pas dans le webbrowser OCX pourtant nickel dans un fichier HTML
il va falloir que je retrouve celle qui arrivait a déplacer les divs
comme j'ai viré les fichier au fur et mesure ca va pas être triste a refaire
purré il s'ennuyais vraiment celui qui a inventer ce langage

je vais encore essayer pendant quelque jour a arriver a un résultat satisfaisant si je vois que ca rentre pas je verrais pour faire cohabiter du vbscript dans mon document avec du javascript
c'est vraiment trop pénible cette histoire de compatibilité

pour être honnête j'avoue que je suis épuisé moralement devant ce truc de fou !
2 semaine pour un truc pareil c'est inacceptable
je vais voir des développeur dans mon entourage qui me fasse des maquettes que je puisse essayé dans mon OCX sinon je m'en sortirais jamais j'avoue baisser un peu les bras

**melka one** · 09/09/2016, 22h43

il existe 2 méthode pour intercepter un évènement

la premiere c'est celle que seule les anciennes versions de ie (<=8) supportes et dans cette méthode c'est le navigateur qui va recherché l'element qui a déclanché l'evenement et qui est placé dans une sorte de variable caché appelé (event)

la deuxieme méthode c'est celle qui est supporté pas tous les autre navigateur y compris ie a partir de la 9 est dans cette méthode l’évènement est transmis en paramètre de fonction

donc toutes les fonction déclanché par un evenement doivent comporté en tout début cette ligne

Code :

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

evt= evt ? evt : event

evt étant le nom du parametre de fonction

le tout se traduisant par si le parametre evt existe on change pas la variable mais si le parametre est nul on remplace evt par event

tous ca pour dire que le probleme d'arcteface vient peut étre de ca

**Watilin** · 10/09/2016, 01h36

J’ai une mauvaise nouvelle : il semblerait qu’il n’y a pas de moyen simple de manipuler la sélection de texte avant IE9.

Mon intervention ne va peut-être pas être inutile toutefois, car j’ai remarqué que tu utilisais innerHTML à deux reprises, une fois en lecture et une fois en écriture. En y accédant en lecture, tu provoques une sérialisation du DOM : les éléments de la page sont traduits en leur représentation HTML et certaines informations passent à la trappe lors de ce procédé, notamment les gestionnaires d’évènements attachés avec addEventListener ou attachEvent, ainsi que les références JavaScript sur ces éléments.

En accédant à innerHTML en écriture, tu provoques un appel à l’interpréteur HTML, et une reconstruction d’arbre DOM. Alors que, juste avant dans ton script, tu appelles createElement dont le principe est de créer directement un objet DOM sans faire appel au moteur HTML. Avoue que c’est un peu dommage. Chose importante, quand tu écris sur un innerHTML, tout le contenu de l’élément est d’abord supprimé. Les éléments que tu fais passer par ta variable codediv ne sont donc plus les originaux mais des copies une fois l’opération terminée.

Depuis la nuit des temps (IE4), on a la merveilleuse méthode insertAdjacentHTML qui permet de garder le côté pratique de innerHTML tout en améliorant un peu ses problèmes de performance.
La solution la plus efficace – d’un point de vue machine – reste toutefois d’utiliser une combinaison de createElement, d’insertBefore et de propriétés de navigation dans le DOM telles que nextSibling. Exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var balise = document.createElement('div');
var Ed = document.getElementById('editeur');
Ed.appendChild(balise);
 
// insertion d’un <p> avant la balise
Ed.insertBefore(document.createElement('p'), balise);
 
// insertion d’un <p> après la balise
if (balise.nextSibling) {
  Ed.insertBefore(document.createElement('p'), balise.nextSibling);
} else {
  Ed.appendChild(document.createElement('p'));
}

**patricktoulon** · 10/09/2016, 09h50

Bonjour Watilin et tout le monde

bon j'ai appliqué ta méthode et ca fonctionne
et du coup j'ai même découvert pourquoi?? les artefacts c'est vraiment un coup de chance

voila ma fonction d'insertion du div

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
 
function selectionne_text(){return window.getSelection().getRangeAt(0);}   
 
 
function insertdiv(){
 var divid="div" + document.getElementsByTagName("div").length;
 var Ed = document.getElementById('editeur');
 var selection = selectionne_text();
 var selectedText = selection.extractContents(); 
   var balise = document.createElement('div');
      balise.style.borderRadius = "6%"; 
      balise.style.border="0.5pt solid black";   
      balise.style.width="200px";
      balise.style.height="200px";
      balise.className="divint";
      balise.id=divid      
//si il y a du texte sélectionné  on englobe le texte avec le div             
             if (selection.length !=0){
                balise.appendChild(selectedText );
                selection.insertNode(balise);
             }
 
   //si on englobe pas du texte le div est hors du flux (absolute )
        if (selection ==""){
        balise.style.position="absolute";                           
        balise .appendChild(document.createElement('p'));
        ed.appendChild(balise);
 
// insertion d’un <p> avant la balise
       Ed.insertBefore(document.createElement('p'), balise);
 
// insertion d’un <p> après la balise
       if (balise.nextSibling) {
        Ed.insertBefore(document.createElement('p'), balise.nextSibling);
      } 
         else {
            Ed.appendChild(document.createElement('p'));
          }
     }                          
 
 
 
 }

maintenant si je veux des bordures plus fine je passe par l'unité "pt"
donc

Code :

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

balise.style.border="1px solid black";

devient

Code :

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

 balise.style.border="0.2pt solid black";

et bien j'te'l'donne dans le mille ARTEFACTS!!!!!!!!!!!
c'est donc une erreur dans le model de Eddigordo qui génère ce soucis
je vais l'éplucher
mais j'ai tellement galérer a me rappeler comment j'avais fait au début pour avoir le drag qui marche dans l'OCX que j'hésite a réintégré le code au complet
je continu mon investigation

**patricktoulon** · 10/09/2016, 10h09

re
je viens aussi de découvrir quelque chose qui me chagrine
si vous regardez cette capture on voit que le div green est a plus de 32 px de top dans l'inspecteur

mais comme il est bien un enfant du div éditeur (on le voit bien dans la partie gauche de l'inspecteur) ,il devrait être a zéro non ????

enlevez moi ce doute

Nom : Capture.JPG
Affichages : 158
Taille : 223,0 Ko

Nom : Capture.JPG
Affichages : 158
Taille : 223,0 Ko

merci pour votre aide vous devez vous marrer avec un bouboule comme moi hein!!!

**patricktoulon** · 10/09/2016, 12h24

Bon avec la tete reposée
j'ai repris mon fichier excel avec le code EddiGordo qui ne fonctionnais pas
et fort des conseils de Watilin
j'ai supprimer toute ligne de code fesant appel au innerHTML de l'editeur y compris dans le insertdiv
et bien les gards ca fonctionne impeccable
et en plus dans l'ocx je n'ai pas les artefacts
il y a encore quelque defaut de positionnement du au parent qui ne sont pas des div mais je pofine

démo en image de mon userform dans excel avec le wisiwyg dans l'ocx
Nom : demo2.gif
Affichages : 189
Taille : 554,3 Ko

Nom : demo2.gif
Affichages : 189
Taille : 554,3 Ko

**patricktoulon** · 10/09/2016, 14h18

re
et encore un nouveau soucis
le drag fonctionne tres bien maintenant mais
lorsque je double clique sur le div pour taper du texte
et que je veux sélectionner le texte le mode drag se met en route
alors j'ai corrigé comme ceci: dans la fonction dragstart
j'ai mis un message(alert) qui me donne bien le P si j'ai sélectionné du texte ou div si je drag le div

problème quand il est dans mon OCX c'est div que j'ai a tout les coups dans le message

alors que dans un fichier html c'est bon

une idée du pourquoi comment ?????

merci pour le retour

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
function dragstart(ev)
   {
    //alert(ev.target.tagName);
    if(ev.target.tagName==="P"){dragged===null}
    else{
     dragged = ev.target;
 
    bordure = dragged .style.border;
    oldparent = dragged.parentElement;
    dragged.style.border = "2px dotted #8258FA";
    fX = ev.offsetX;
    fY = ev.offsetY;
    X = ev.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
    Y = ev.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
    DX = 0;
    DY = 0; 
    DX = X - dragged.offsetLeft;
    DY = Y - dragged.offsetTop;
    ev.stopPropagation();
                                                                ev.returnValue = false;
    if (ev.preventDefault) ev.preventDefault();
         }      
                                                 }

**Watilin** · 10/09/2016, 15h35

Ici :

Code :

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

    if(ev.target.tagName==="P"){dragged===null}

Tu voulais sans doute écrire dragged = null (un seul signe égale). Mais ça ne changera rien puisque le reste de la fonction est dans un else.

L’OCX est un environnement que je ne peux pas tester, malheureusement… Mais si je fais la supposition que ton triple-égale est juste une erreur de recopie sur ce forum, ça pourrait marcher par chance dans ton environnement HTML parce que l’évènement se propage dans le bon ordre, et que dragged est changé à null avant d’atteindre la <div>. Si jamais, pour une raison quelconque, l’évènement se propage dans le désordre dans l’OCX, et déclenche ta fonction dragstart sur la <div> avant de passer par le <p>, ça expliquerait le problème. Mais c’est beaucoup de suppositions.

N’oublie pas les rituels garde-fous autour de ev :

Code :

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

1
2
ev = ev || event;
var target = ev.target || ev.srcElement;

Pour empêcher la propagation de l’évènement :

Code :

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

1
2
ev.cancelBubble = true;
if (ev.stopPropagation) ev.stopPropagation();

Pour annuler le comportement par défaut :

Code :

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

1
2
ev.returnValue = false;
if (ev.preventDefault) ev.preventDefault();

Dans le cas d’un <p>, tu dois empêcher la propagation de l’évènement mais sans annuler le comportement par défaut (qui est de sélectionner du texte).

**patricktoulon** · 10/09/2016, 15h51

ok je pige pas tou mais le debut je crois
voici comment je l'ai arrangé

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
function dragstart(ev)
   {
    if(ev.target.tagName==="P"){dragged=null;
    ev.returnValue = false;
    //if (ev.preventDefault) ev.preventDefault();
    }
    else{
     ev = ev || event;
     target = ev.target || ev.srcElement;
    dragged = target;
 
    bordure = dragged .style.border;
    oldparent = dragged.parentElement;
    dragged.style.border = "2px dotted #8258FA";
    fX = ev.offsetX;
    fY = ev.offsetY;
    X = ev.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
    Y = ev.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
    DX = 0;
    DY = 0; 
    DX = X - dragged.offsetLeft;
    DY = Y - dragged.offsetTop;
    ev.stopPropagation();
                                                                ev.returnValue = false;
    if (ev.preventDefault) ev.preventDefault();
         }      
                                                 }

ca semble fonctionner dans le fichier HTML je vais l'intégrer dans l'e document de l'ocx pour voir

**patricktoulon** · 10/09/2016, 16h25

Bon visiblement ca le fait que sur les divs ajoutés dynamiquement
vraiment bizarre ce truc

si tu a Excel voici un classeur tout simple avec le webbrowser
essaie de sélectionner du texte d'un des divs rouge,vert ou bleu et déplace le dans un autre (ca fonctionne )

ensuite ajoute un div place le ou tu veux tape du texte dedans et essais de déplacer le texte dans un des autres divs
pour sélectionner du texte il faut clinquer 2 fois!! dans un content éditable qu'il y est les bordures avec des slashs

ci joint un exemple simple de fichier exel avec le userform et son webbrowser

appuie sur le bouton "ouvrir l'useform" dans la feuille

**patricktoulon** · 10/09/2016, 16h51

ca y est !!!!!! j'ai trouvé

Code :

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

if (newparent.tagName!="DIV"){newparent=newparent.parentElement;}

"DIV" en majuscule va savoir pourquoi??????
cela m'arrive souvent avec les object HTML en VBA et VB
c'est bon ca a l 'air de fonctionner

il manque plus qu'a imposer la limite des bords du div "editeur" et je crois que pour le drag se sera bon

je vais chercher comment faire

**melka one** · 10/09/2016, 19h54

autres point concernant les evenements les versions de ie 9 a 11 supporte les deux méthode d'evenement et en mélangeant les deux ce qui est le cas ie risque de ne plus s'y retrouvé il peut y avoir des ralentissements voir des bug.

**patricktoulon** · 11/09/2016, 13h30

Bonjour a tous

alors voila le drag des divs ca peut aller mais j'ai un soucis que je n'arrive pas a expliquer et la vous en conviendrez c'est vraiment bizarre

pour quoi bizarre me direz vous

et bien tout simplement par ce que dans les deux démos que vous allez voir en iage animées l'un dans un fichier html local l'autre dans mon OCX dans un userform ont absolument le même code au complet je dis bien absolument !!!!

j'ai d'abords penser que c'était une interaction avec les autre fonctions mais il n'en ai rien

j'aimerais bien avoir la solution qui me gène dans la démo de mon userform (demo2)

voila la démo1 dans un fichier HTML(demo1)
Nom : demo1.gif
Affichages : 178
Taille : 411,3 Ko

Nom : demo1.gif
Affichages : 178
Taille : 411,3 Ko

MAINTENANT la démo 2 dans le userform

Nom : demo2.gif
Affichages : 170
Taille : 739,3 Ko

je me prend la te avec ca depuis ce matin

il va y avoir une explosion dans le sud si ca continu on va voir des éléments de PC en plus flotter dans l'espace

pitié

avant tout il faut savoir que je ne veux pas utiliser

if(ev.target!="div"){dragged=null}

car je veux après avoir résolu ce soucis ajouter le
addeventlistener(dragstart,dragstart,false); au balises img car le reste du code pour le drag ne devrait pas changer d'yota

merci pour votre aide

voila le code complet

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<!doctype html>
<html lang="fr">
 
<head>
 <meta charset="utf-8">
  <title>patrick WYSIWYG html </title>
<meta http-equiv="X-UA-Compatible" content="IE=10"> 
<style>
p{margin:2px 0;}
#editeur{
width:100%;
height:1500px;
border:1px solid black;
display:inline-block;
}
p, img {
    vertical-align: middle;
}
#editeur div{
display:inline-blok;
display:block
float:left;
 margin-left: 50px;
width:auto;
overflow: auto;
clear:both;}
</style>
<script  type= "text/javascript">
//*******************************************************************************************************************************
   var ed ;
   var DX,DY,oX,oY, fX, fY;
   var newparent;
   var oldparent;
   var dragged;
   var bordure;
   var code;
   //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);
   document.addEventListener('mousemove',WhereMouse,false);
   document.addEventListener('mouseup',drag_onmouseup,false);
   //document.addEventListener('mousedown',Mdown,false);
 
                                                   /////////////////////////////////////////////////////////////////////////////FONCTION QUI ARRETE LE DEPLACEMENT ET AJUSTE LA POSTION //////////////////////////////////////////////////
   function drag_onmouseup(ev)
   {
    if (dragged != null)
    { 
        dragged.style.border = bordure;
     var rect = dragged.getBoundingClientRect();
     oX = rect.left -9;
     oY = rect.top;
     newparent = document.elementFromPoint(oX, oY);
     if (newparent != null && oldparent.id != newparent.id)
     {
      if (newparent.tagName!="div"){newparent=newparent.parentElement;}
                                                                                          newparent.appendChild(dragged);
                                                                                           dragged.style.border = bordure;
      var rP = newparent.getBoundingClientRect();
      var rX = ev.clientX - rP.left;
      var rY = ev.clientY - rP.top;
 
      dragged.style.left = rX - fX + "px";
      dragged.style.top = rY - fY + "px";
 
      oldparent = null;
      newparent = null;
     }
     dragged = null;
    }
 
                                               }  //On arrête le drag}
 
   ////////////////////////////////////////////////////////////////////////////FONCTION QUI DEMARRE LE DRAG //////////////////////////////////////////////////////////
   function dragstart(ev)
   {
    if(ev.target.tagName=="P"){dragged=null;
    ev.returnValue = false;
    //if (ev.preventDefault) ev.preventDefault();// si je debloque cette ligne je n'ai plus le dragand dropt du texte 
    }
    else{
     ev = ev || event;
     target = ev.target || ev.srcElement;
    dragged = target;
 
    bordure = dragged .style.border;
    oldparent = dragged.parentElement;
    dragged.style.border = "2px dotted #8258FA";
    fX = ev.offsetX;
    fY = ev.offsetY;
    X = ev.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
    Y = ev.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
    DX = 0;
    DY = 0; 
    DX = X - dragged.offsetLeft;
    DY = Y - dragged.offsetTop;
    ev.stopPropagation();
                                                                ev.returnValue = false;
    if (ev.preventDefault) ev.preventDefault();
         }      
                                                 }
 
   ///////////////////////////////////////////////////////////////////FONCTION QUI DEPLACE LE DIV //////////////////////////////////////////////////////////////
   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";
    }
         }
 
//********************************************************************************************************************************
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function selectionne_text()
   {
 
 
return window.getSelection().getRangeAt(0);
   }   
 
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////
function InsertImage(Data)
{
  try {
               var ids="image"+document.getElementsByTagName("img") .length +1;
                            var selection = selectionne_text();
   var selectedText = selection.extractContents();
   var baliseimg = document.createElement("img");
   //baliseimg.style.width=300;
                                             //baliseimg.style.height=300 / h ;
                                             baliseimg.appendChild(selectedText);
   baliseimg.src=Data;
   baliseimg.id=ids;
                            baliseimg.className="image";
 
baliseimg.onDragStart="return false" ;
baliseimg.onMouseDown="return false"; 
 selection.insertNode(baliseimg);
document.getElementById(ids).width=300;
                }
        catch (e) {alert("Vous devez vous placer sur l'éditeur!");};
}
 
/////////////////////////////////////////////////////////////////////////////////
 
/////////////////////////////////////////////////////////////////////////////////////////////////////
function insertdiv(){
 var divid="div" + document.getElementsByTagName("div").length;
 var ed = document.getElementById('editeur');
 var selection = selectionne_text();
 var selectedText = selection.extractContents(); 
   var balise = document.createElement('div');
      balise.style.borderRadius = "6%"; 
      balise.style.border="1px solid black";   
      balise.style.width="200px";
      balise.style.height="200px";
      balise.className="divint";
      balise.id=divid      
//si il y a du texte sélectionné  on englobe le texte avec le div             
             if (selection.length !=0){
                balise.appendChild(selectedText );
                selection.insertNode(balise);
             }
 
   //si on englobe pas du texte le div est hors du flux (absolute )
        if (selection ==""){
        balise.style.position="absolute";                           
        balise .appendChild(document.createElement('p'));
        ed.appendChild(balise);
 
     }                          
 ed.appendChild(document.createElement('p'));
 document.getElementById(divid).addEventListener("dragstart",dragstart,false);
 
 }
 /////////////////////////////////////////////////////////////////////////////////////////////////////////
function printDoc() {
 
  var oPrntWin = window.open("","_blank","width=702,height=600,left=400,top=100,menubar=yes,toolbar=yes,resizable=yes,location=no,scrollbars=yes");
  oPrntWin.document.open();
  oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + editeur.innerHTML + "<\/body><\/html>");
  oPrntWin.document.close();
}
////////////////////////////////////////////////////////////////////////////////////
function shadowcolor(coul){
if (selectionne_text()){   
 
                                        var selection = selectionne_text(); 
 var selectedText = selection.extractContents();
                                        var balisefont = document.createElement("FONT");
                                        balisefont.className="shado";  balisefont.appendChild(selectedText);
                                       var strbal=balisefont.innerHTML;
                                       var colhtml=balisefont.getElementsByTagName("font");
                                               if (colhtml.length>0){
                                                           for(var i=0;i<colhtml.length;i++){
                                                           var strinnerT=colhtml[i].innerHTML;
                                                           var str = colhtml[i].outerHTML;
                                                           var deb = "class=" + str.split("class=")[1];
                                                           var fin = deb.split(">")[0];                                                                                                                                                                          
                                                           var str2=  str.replace(fin,"");                                                                                                                                                                     
                                                           var bal=str2.substring(0, 7);
 
                                                           if (bal =="<font >"){var strbal=strbal.replace(str,strinnerT);}
                                                           if (bal !="<font >"){ var strbal=strbal.replace(fin,"");}
                                                          // if( colhtml[i].innerHTML==""){ var strbal=strbal.replace(str,"");}
                                                           }
                                               }
balisefont.innerHTML=strbal;
balisefont.style.textShadow = "0px 0px 10px "+coul; 
 
 selection.insertNode(balisefont);
 
                                    }//fin du if selectionnetext
}//fin de fonction shado
 
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function retirshadowcolor(){
if (selectionne_text()){   
     var selection = selectionne_text(); 
                                        var selectedText = selection.extractContents();
                                        var balisefont = document.createElement("FONT");balisefont.appendChild(selectedText);
var strbal=balisefont.innerHTML;
var ll=balisefont.getElementsByTagName("font").length;
 var colhtml=balisefont.getElementsByTagName("font");
                                               if (colhtml.length>0){
                                                           for(var i=0;i<colhtml.length;i++){
                                                           var strinnerT=colhtml[i].innerHTML;
                                                           var str = colhtml[i].outerHTML;
                                                           var deb = "class=" + str.split("class=")[1];
                                                           var fin = deb.split(">")[0];                                                                                                                                                                          
                                                           var str2=  str.replace(fin,"");                                                                                                                                                                     
                                                           var bal=str2.substring(0, 7);
 
                                                           if (bal =="<font >"){var strbal=strbal.replace(str,strinnerT);}
                                                           if (bal !="<font >"){ var strbal=strbal.replace(fin,"");}
                                                           }
                                               }
 balisefont.innerHTML=strbal;   selection.insertNode(balisefont);
var par=balisefont.parentElement;
var par2=par.parentElement;
if (par.className=="shado"){
balisefont.className="shado";
balisefont.style.textShadow="none";}
 
nettoyage();
//editeur.click
}//fin du if selectionnetext
}//fin de fonction 
//////////////////////////////////////////////////////////////
function nettoyage(){
var elements=editeur.getElementsByTagName("font");
for (var i=0;i<elements.length;i++){
var par=elements[i].parentElement;
if (elements[i].innerHTML==""){par.removeChild(elements[i])}
}//fin de boucle for 
}// fin de fonction
////////////////////////////////////////////////
 
</script>
</head>
<body>
  <button onclick="insertdiv()"> ajouter un div </button>
  <div id="editeur" style="border: 1px solid black; width: 90%; height: 90%; min-height: 600px;" contenteditable="true">
<p> du texte dans l'editeur</p><p></p><p></p>
 
    <div class="divint" id="blue" style="border:1px solid blue; left: 92.8px; top: 194.79px; width: 200px; height: 200px; position: absolute;" ondragstart="dragstart(event)">
       <p>du texte dans celui ci</p>
    </div>
 
    <div class="divint" id="red" style="border:1px solid red; left: 663.79px; top: 171px; width: 250px; height: 250px; position: absolute;" ondragstart="dragstart(event)">
       <p>du texte dans mon div</p>
   </div>
   <div class="divint" id="green" style="border:1px solid green; left: 406.79px; top: 134.51px; width: 100px; height: 100px; position: absolute;" ondragstart="dragstart(event)">
       <p>celui la aussi</p>
   </div>
</div>
 </body>
</html>

**Watilin** · 14/09/2016, 19h53

Salut, j’ai encore eu des problèmes de connexion…

Je n’ai pas Excel, du moins pas la version de Microsoft. Sans pouvoir tester, je vais t’aider du mieux que je peux. Je vais reprendre ton dernier code et, comme je l’ai fait au début, l’arranger à ma manière, mais cette fois en t’expliquant pas à pas pourquoi je fais les choses de telle ou telle façon.

D’abord, un petit coup au formateur de Firefox. J’ouvre l’ardoise (Maj+F4), je colle ton code et je fais Ctrl+P pour formater.

Concentrons-nous sur la fonction dragstart. Tout d’abord, elle reçoit en paramètre un objet évènement ev qui subit les aléas de la compatibilité comme l’a fait remarquer melka one. Il faut s’assurer que l’objet existe, quelle que soit la version d’IE. Ainsi, l’instruction ev = ev || event; doit se trouver au tout début de la fonction. Ensuite il faut prendre les mêmes précautions pour avoir un objet target fiable. On va se créer une variable locale target (on aurait pu choisir n’importe quel nom), et on va écrire cette instruction : var target = ev.target || ev.srcElement;. Ne pas oublier var, sinon la variable devient globale, et c’est la porte ouverte aux bugs les plus infernaux à déceler. Une note au passage : le mode strict permet de voir tout de suite les endroits où var a été oublié, c’est utile…

Pour l’instant on a le début de la fonction :

Code :

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

1
2
3
4
function dragstart(ev) {
  ev = ev || event;
  var target = ev.target || ev.srcElement;
  ...

Ensuite, on a le test avec tagName. Oui, les tagNames sont toujours en majuscules, moi aussi je trouve ça débile, et moi aussi je me trompe une fois sur deux. Au bout d’un moment j’ai fini par trouver une parade, c’est d’utiliser toLowerCase() :

Code :

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

1
2
  if (target.tagName.toLowerCase() === 'p') {
    ...

Quand j’ai un test d’égalité à faire, je mets la partie non variable à gauche des signes égale, ça permet d’éviter que mon test devienne une affectation si je fais une faute de frappe malheureuse. On appelle ça une condition Yoda.

Dans la branche if, tu as fait le contraire de ce que je te proposais : tu as utilisé preventDefault qui annule le comportement par défaut (dont tu as besoin), alors que tu devais utiliser stopPropagation pour empêcher l’évènement de remonter à la <div> parente du <p>.
Le returnValue est « l’ancienne version » de preventDefault, je suis surpris qu’il n’ait pas posé de problème alors que tu ne l’avais pas désactivé…

Melka one suggère de ne pas mélanger les « anciennes » et « nouvelles » façons de gérer les évènements. On va donc utiliser des if/else.

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
function dragstart(ev) {
  ev = ev || event;
  var target = ev.target || ev.srcElement;
  if ('p' === target.tagName.toLowerCase()) {
    if (ev.stopPropagation) {
      ev.stopPropagation();
    } else {
      ev.cancelBubble = true;
    }
    dragged = null;
  } else {
    if (ev.preventDefault) {
      ev.preventDefault();
    } else {
      ev.returnValue = false;
    }
 
    ...
 
  }
}

Là normalement tu commences à te dire que toutes ces instructions pour gérer les anciennes versions génèrent beaucoup de code supplémentaire, et que ça serait peut-être pas mal de factoriser un peu tout ça. On verra plus tard.

Pour le reste de la fonction dragstart, j’ai simplement rajouté des var à X et Y qui n’étaient pas déclarées, et supprimé les instructions DX = 0; DY = 0; qui étaient inutiles. Voilà ce que ça donne au final :

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
function dragstart(ev) {
  ev = ev || event;
  var target = ev.target || ev.srcElement;
  if ('p' === target.tagName.toLowerCase()) {
    if (ev.stopPropagation) {
      ev.stopPropagation();
    } else {
      ev.cancelBubble = true;
    }
    dragged = null;
  } else {
    if (ev.preventDefault) {
      ev.preventDefault();
    } else {
      ev.returnValue = false;
    }
    dragged = target;
    bordure = dragged.style.border;
    oldparent = dragged.parentElement;
    dragged.style.border = '2px dotted #8258FA';
    fX = ev.offsetX;
    fY = ev.offsetY;
    var X = ev.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
    var Y = ev.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
    DX = X - dragged.offsetLeft;
    DY = Y - dragged.offsetTop;
  }
}

Je reviens sur cette histoire de comparaisons strictes. Quand tu testes if (dragged != null), ça revient au même que if (dragged != undefined). C’est un heureux hasard car, dans les premiers instants de « vie » de l’application, drag_mouseup peut être appelé avant le premier appel à dragstart, ce qui fait que dragged n’a pas encore reçu de valeur à cet instant. Déclaré sans valeur avec l’instruction var dragged;, il reçoit implicitement la valeur undefined qui est différente, au sens strict, de null. Si tu utilisais une comparaison stricte à cet endroit, ton script ne fonctionnerait pas correctement.

Pour cette raison, je préfère écrire if (dragged) tout court, qui prend le sens de « si dragged existe », plutôt que de le comparer explicitement à null. Une autre solution serait de donner dès le départ la valeur null à dragged lors de sa déclaration. Tout ça n’est qu’une affaire de lisibilité du code, mais je préfère bien expliquer mes choix.

Code :

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

1
2
3
4
5
6
7
8
function drag_onmouseup(ev) {
  if (dragged) {
    dragged.style.border = bordure;
    var rect = dragged.getBoundingClientRect();
    oX = rect.left - 9;
    oY = rect.top;
    newparent = document.elementFromPoint(oX, oY);
    ...

On arrive à une comparaison intéressante : oldparent.id != newparent.id. Il se trouve que les éléments DOM, comme tous les objets JavaScript, peuvent être comparés directement. Si oldparent et newparent sont le même élément, la comparaison oldparent === newparent sera vraie, même pas besoin de regarder les id. Évidemment, la réciproque est vraie.

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
    ...
    if (newparent && oldparent !== newparent) {
      if (newparent.tagName.toLowerCase() !== 'div') {
        newparent = newparent.parentElement;
      }
      newparent.appendChild(dragged);
      dragged.style.border = bordure;
      var rP = newparent.getBoundingClientRect();
      var rX = ev.clientX - rP.left;
      var rY = ev.clientY - rP.top;
      dragged.style.left = (rX - fX) + 'px';
      dragged.style.top  = (rY - fY) + 'px';
      oldparent = null;
      newparent = null;
    }
    dragged = null;
  }
}

Les parenthèses autour de rX - fX ne sont pas indispensables, mais elles lèvent toute ambigüité, et préviennent des accidents futurs si cette ligne venait à être modifiée. On n’est jamais à l’abri d’une surprise quand on mélange les chaînes et les nombres en JS…

Parlons de compatibilité. J’ai l’impression que, jusqu’à présent, tu n’as pas testé ton code dans un environnement inférieur à IE9. Tu aurais rencontré des problèmes avec getSelection. Assurer la compatibilité de ton application avec IE8 (et inférieurs) risque de te demander beaucoup de travail à cause de cette fonction getSelection absente et de tout ce que ça implique. Il faudrait que tu ailles pêcher une solution sur Stackoverflow ou Github, je sais qu’il en existe mais il faut prendre le temps de les comprendre et de les intégrer dans sa propre application. Tout ça c’est du travail en plus.

Si tu faisais le choix de déclarer ton application incompatible avec des moteurs inférieurs à IE9, tu pourrais du même coup te débarrasser de toutes ces parties dans ton code qui gèrent la compatibilité des évènements, attachEvent, ev || event, ev.target || ev.srcElement, etc.

Sinon, tu peux te bricoler ton propre « framework » de gestion d’évènements pour éviter de répéter du code dans tes différentes fonctions. Par exemple :

Code :

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

1
2
3
4
5
6
7
var addEvent = window.addEventListener ?
  function addEvent(element, event, listener) {
    element.addEventListener(event, listener, false);
  } :
  function addEvent(element, event, listener) {
    element.attachEvent('on' + event, listener);
  };

Ce que fait ce bout de code, c’est regarder une fois (et une seule) si window.addEventListener existe, et déclarer une fonction addEvent différente selon la situation. Si addEventListener existe, la fonction addEvent utilisera addEventListener, sinon elle utilisera attachEvent.

Avec cette fonction, au lieu d’écrire :

Code :

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

1
2
document.addEventListener('mousemove', WhereMouse, false);
document.addEventListener('mouseup', drag_onmouseup, false);

Tu écriras :

Code :

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

1
2
addEvent(document, 'mousemove', WhereMouse);
addEvent(document, 'mouseup', drag_onmouseup);

Pour aller plus loin, on peut faire en sorte que les évènements reçus par tes fonctions existent toujours, et aient toujours les bonnes propriétés, mais ça demande des manipulations un peu plus complexes. Je te montrerai comment faire si ça t’intéresse, il te suffira de demander. Pour le moment je te propose les fonctions stopEvent et preventEvent qui remplacent, respectivement, stopPropagation et preventDefault.

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
var addEvent, stopEvent, preventEvent;
if (window.addEventListener) {
  addEvent = function addEvent(element, event, listener) {
    element.addEventListener(event, listener, false);
  };
  stopEvent = function stopEvent(ev) {
    ev.stopPropagation();
  };
  preventEvent = function preventEvent(ev) {
    ev.preventDefault();
  };
} else {
  addEvent = function addEvent(element, event, listener) {
    element.attachEvent('on' + event, listener);
  };
  stopEvent = function stopEvent(ev) {
    ev.cancelBubble = true;
  };
  preventEvent = function preventEvent(ev) {
    ev.returnValue = false;
  };
}

Ce code est à placer de préférence en début de script.

Avec ces nouvelles fonctions, le code de ta fonction dragstart, par exemple, devient légèrement plus court et plus lisible :

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
function dragstart(ev) {
  ev = ev || event;
  var target = ev.target || ev.srcElement;
  if ('p' === target.tagName.toLowerCase()) {
    ev.stopEvent(ev);
    dragged = null;
  } else {
    preventEvent(ev);
    dragged = target;
    bordure = dragged.style.border;
    oldparent = dragged.parentElement;
    dragged.style.border = '2px dotted #8258FA';
    fX = ev.offsetX;
    fY = ev.offsetY;
    var X = ev.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
    var Y = ev.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
    DX = X - dragged.offsetLeft;
    DY = Y - dragged.offsetTop;
  }
}

Un autre exemple ici avec InsertImage qui utilise des évènements DOM niveau 0. Dans de tels cas, un return false est équivalent à un preventDefault du DOM niveau 2.

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
function InsertImage(Data) {
  try {
    var ids = 'image' + document.getElementsByTagName('img').length + 1;
    var selection = selectionne_text();
    var selectedText = selection.extractContents();
    var baliseimg = document.createElement('img');
    //baliseimg.style.width=300;
    //baliseimg.style.height=300 / h ;
    baliseimg.appendChild(selectedText);
    baliseimg.src = Data;
    baliseimg.id = ids;
    baliseimg.className = 'image';
    addEvent(baliseimg, 'dragstart', function (ev) { preventEvent(ev); });
    addEvent(baliseimg, 'mousedown', function (ev) { preventEvent(ev); });
    selection.insertNode(baliseimg);
    baliseimg.width = 300;
  } catch (e) {
    alert('Vous devez vous placer sur l’éditeur\xA0!\n' +
      e.message + ', ligne ' + e.lineNumber);
  }
}

Ton try/catch est un bon réflexe étant donné le peu de moyens de débogage dont tu sembles disposer dans l’OCX. J’ai amélioré un peu l’alert pour que tu aies des informations sur l’erreur. Utiliser cette technique à d’autres endroits te permettra peut-être de déceler des erreurs sournoises.

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

JavaScript

Discussions similaires

Partager

Partager