Discussion :

[patricktoulon]

Bonjour a tous
j'ai remis mon drag and drop and attach parent dans mon nouveau wysiwyg
les evenement sont dynamiques(addEventlisterner)
ca marche tres bien
par contre des que j'enregistre mon document( la partie editeur) et qu'eventuellement je la reload pour la modifier je n'ai plis les evenement forcement
je voudrais donc une sorte de boucle (for each; je sais qu'elle va etre retirer donc je ne veux pas l'utiliser)
qui me boucle sur tout les element et aux element image et div ayant respectivement la classe "divint" et "image" ajouter l'evenement dragstart

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
function ouvrirfichier() {
                choixfichier.click();
                var chemin = choixfichier.value;
                obj = new ActiveXObject("Microsoft.XMLHTTP");
                obj.open("GET", chemin, false);
                obj.send(null);
                if (obj.readyState == 4) {
                        var txt = obj.responseText.split("<cdd>")[1];
                        txt = txt.split("<PRE>")[0];
                        editeur.innerHTML = txt;
                }
 
            //ajouter l'evenement a tout les element ayant la classe "divint" ou "image" ((.addEventListener("dragstart", dragstart, false)));
 
}

merci pour les retours

[patricktoulon]

en attendant je fait comme ca est ce que c'est perenne

Code javascript :

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
function ouvrirfichier() {
        choixfichier.click();
        var chemin = choixfichier.value;
        obj = new ActiveXObject("Microsoft.XMLHTTP");
        obj.open("GET", chemin, false);
        obj.send(null);
        if (obj.readyState == 4) {
                var txt = obj.responseText.split("<cdd>")[1];
                txt = txt.split("<PRE>")[0];
                editeur.innerHTML = txt;
        }
        var elements = editeur.getElementsByTagName("*");
        for (var i = 0; i < elements.length; i++) {
                if (elements[i].className === "divint" || elements[i].className === "image") {
                        elements[i].addEventListener("dragstart", dragstart, false);
                }
        }
}

[Watilin]

Je réagis là-dessus :

Code :

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

1
2
3
4
5
6
var elements = editeur.getElementsByTagName("*");
for (var i = 0; i < elements.length; i++) {
  if (...) {
    elements[i].addEventListener("dragstart", dragstart, false);
  }
}

S’il y a des éléments imbriqués dans ton éditeur (et d’après ce que j’ai compris, c’est fortement probable), tu vas avoir des scénarios dans lesquels un élément, et son parent, et son grand-parent, etc., ont chacun un gestionnaire de dragstart, de quoi créer une situation vraiment chaotique.

En plus de ça tu as un problème de performances en deux points :

• getElementsByTagName qui est notoirement lente quand on lui passe "*"
• le fait d’ajouter un grand nombre de gestionnaires d’évènements dans la page.

La solution, c’est de faire de la délégation d’évènement, c’est-à-dire d’avoir un seul gestionnaire d’évènement attaché à la zone contenteditable entière, et d’examiner event.target pour déterminer quel élément est la véritable cible de l’évènement.

Ça a aussi l’avantage de gérer automatiquement les éléments nouvellement ajoutés.

Code :

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

1
2
3
4
5
6
7
8
// en supposant que tu as une variable zone
zone.addEventListener("dragstart", function (event) {
  if (event.target.className === "divint" || event.target.className === "image") {
    // ...
    // (le code de la fonction dragstart)
    // ...
  }
});

[patricktoulon]

re
oui mais il n'y a pas une gestion de eventpreventdefaut() a faire ?
c'est une torture pour moi dans l'ancien qui a été fait comme ca
et il y a pas mal de ratés au point des fois de fermer le fichier car aucun retour possible

c'est pour ca que je l'ai fait plus clair
et puis j'apprends en meme temps

je suis justement en train de revoir mon drag/attach new parent qui utilise l'evenement document move,down,up pour les deplacement
je l'avais fait comme ca parceque dans un content editable dans IE 10 utiliser les evenement des elements eux memes etait pas possible je viens de constater q'uavec IE 11 ca fonctionne meme si le parent est contentedtable
apres il faut pas oublier que mon support 1(ocx webbrowser vbaexcel est capricieux ) je jongle donc entre ce comment on doit faire et ce qui est possible
pour le moment mon fichier marche dans IE,ocx webbrowser,chrome(sauf imageinsert

[Beginner.]

en attendant je fait comme ca est ce que c'est perenne

Code javascript :

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

1
2
3
4
5
6
7
...
        var elements = editeur.getElementsByTagName("*");
        for (var i = 0; i < elements.length; i++) {
                if (elements[i].className === "divint" || elements[i].className === "image") {
                        elements[i].addEventListener("dragstart", dragstart, false);
                }
        }

Je pense que ce serait plus rapide avec : var elements = document.querySelectorAll(".divint,.image ")!; car tu récupères seulement les éléments qui t'intéressent et donc moins d’éléments à traiter et plus besoin du if...

Sinon tu fais ça pour pouvoir déplacer les images par glisser/déposer ? Sur FF et Chrome on peut déjà (nativement) déplacer une image par glisser/déposer et sur FF on peut même la redimensionner... Mais c'est vrai que sur Chrome c'est moins intuitif et il n'y a pas le redimensionnement...

La solution, c’est de faire de la délégation d’évènement, c’est-à-dire d’avoir un seul gestionnaire d’évènement attaché à la zone contenteditable entière, et d’examiner event.target pour déterminer quel élément est la véritable cible de l’évènement.

Ça a aussi l’avantage de gérer automatiquement les éléments nouvellement ajoutés.

Intéressant, au message #2 (dernier paragraphe) je proposais un truc de ce genre pour les boutons...

[patricktoulon]

re
bonjour tout les deux je vais essayer queryselector si c'est compatible avec mon support si oui ca change la vie

et oui je fait ca non seulement pour deplacer les div mais je change le parent il y a une partie attache au new parent avec

c'est pas natif dans IE il y a juste le drag an drop mais pas le deplacement dans un meme parent et le redim est que en content editable

bon si vous y tenez je vais reprendre a zero en gradant les fonctions qui sont pretes et fonctionnel on va passer en mode event et event.target
ca m'epuise ce language

pour le deplacement et attach voir demo ci dessous je sais pas si le gif va passer 1Mega80

ca c'est pas natif

[Beginner.]

Ah oui c'est une bonne fonctionnalité ça... Je vois qu'il y a les fameux rectangles autour de l'image/de la div comme sur FF mais sur Chrome il n'y en a pas du coup c'est moins intuitif... Je me demande si ça vaut le coup et si ce n'est pas trop difficile de l'ajouter...

[patricktoulon]

le rectangle(border) c'est moi qui le change pendant le drag et le border d'origine revient des que je lache
j'ai juste un peu remanier l'ancienne version et efectivement c'est l'evenement document move down up qui gere tout les divint et image just le dragstart des element pour lancer le drag
la complexité fut pour les echange de parent et les offset x j'avais resolu avec getboundingrect
mais entre nous c'est pas forcement mieux surtout que je viens de decouvrir qu'avec IE11 on pouvait le gerer chaque div dans son propre evenement quand il est enfant d'un content editable
avant avec IE 10 tout les element dans le content editable etait pas posible de gérer leur evenement move down et.....c'etait le mode content editable qui prenais le dessus c'est pour cela que je l'avais fait comme ca
Nosmoking et meme watilin il me semble m'avais beaucoup aidé
aujourd'hui meme dans un content editable il ne faut plus grand chose comme code pour le deplacer avec la souris (3 fois rien )j'ai eu plein de mise ajour sur IE 10 et depuis IE 11 il y a eu 4 versions sans compter les mises a jours je ne peux donc pas dire depuis quand c'est possible

aujourd'hui deplacer un element par la souris avec IE et dans un content editable ou meme pas editable simplement

exemple vite fait

Code HTML :

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
<!DOCTYPE HTML >
<html lang="fr">
<head>
    <!--meta charset="utf-8"-->
    <title>patrick WYSIWYG html </title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
<style> 
html{
width:100%;
height:100%;
}
#editeur{
position:absolute;
width:500px;
height:400px;
border:2px solid red;
overflow:auto;
}
 
#drago{
width:100px;
height:100px;
border:2px solid blue;
}
</style>
 
<script type="text/javascript">
var drago;
var oldX;
var oldY;
var offsetX;
var offsetY;
function dragStart(event){
drago=event.target;
oldX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
oldY = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
offsetX=oldX-event.target.offsetLeft;
offsetY=oldY-event.target.offsetTop;
}
 
function dragging(event) {
var newX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
if ((newX-offsetX)<0){newX=offsetX;}
var newY = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
if ((newY-offsetY)<0){newY=offsetY;}
drago.style.position="absolute";
drago.style.left=(newX-offsetX) +"px";
drago.style.top=(newY-offsetY) +"px";
}
 
</script>
</head>
<body>
<div id="editeur"contenteditable="true"  > 
test drag
<div id="drago" ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true"> drago</div>
</div>
</body>
</html>

je te montre pas le code d'avant bien que le demo montre qu'il est parfaitement fonctionnel mais geré par les evenement document .move,down,up

[Beginner.]

Merci pour l'exemple que je teste ici : http://jsbin.com/qexisobayi/edit?html,output

Il ne fonctionne pas sur FF apparemment...

[patricktoulon]

bonjour beguinner
oui en effet je viens d'installer FF juste pour les test et ca marche pas effectivement
et sur chrome il se deplace mais se fige pas il revient tout seul des qu'on le lache
bref perso c'a m'est completement egal a la limite il faut en priorité que ca fonctionne sur IE vu que mon support vba utilise les librairie de IE et pas de jquery

il faut tester avec IE


j'avais un exemple simplifié qui a quelque defaut de repositionnement mais si tu ne peux pas tester dans IE ca rique d'etre difficile de m'aider
je vais essayer de trouver l'erreur dans mon calcul

je commence un peu a baisser les bras tout ce qui fonctionne sur FF chrome ne fonctionnent pas dans l'OCX vba et tout ce qui fonctionne chez moi ne fonctionne pas chez vous

[patricktoulon]

bonjour beguinner
j'ai mis ff pour chercher un peu

j'ai bien une version qui fait bouger les divs mais les attacher c'est une autre paire de manche
je l'ai fait dans un seul evenement
d'autre part je ne saurais dire pourquoi les divs perdent leur mode contenteditable hérité de l'editeur

je te refile le bebe

Code html :

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
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"  /> 
<title>Déplacer un élément à la souris dans firefox et IE</title> 
<style> 
#square 
{ 
  position:absolute; 
  height:100px; 
  width:100px; 
  background-color:red; 
} 
 
</style> 
<script type="text/javascript">
var mouse_down = false; 
var drago;
var dX;
var dY;
var editeur;
var xx;
var yy;
function on_mouse_down_square(event) {
        if (mouse_down === false && event.target.className==="dragg") {
                mouse_down = true;
                drago = event.target;
                xx=drago.offsetLeft;
                dX = event.clientX-drago.offsetLeft;
  dY = event.clientY-drago.offsetTop;
editeur=document.getElementById("editeur");
        }
}
 
function on_mouse_up(event) {
        mouse_down = false;
event.stopPropagation();
        var rect = drago.getBoundingClientRect();
        var divs = editeur.getElementsByTagName("DIV");
        var newparent = editeur;
        for (var i = 0; i < divs.length; i++) {
                var rect2 = divs[i].getBoundingClientRect();
                if (rect2.left < rect.left && rect2.top < rect.top && rect2.right>rect.right && rect2.bottom>rect.bottom) {
                        var newparent=divs[i];
                        var rl=rect2.left;
                        var RT=rect2.top;
                         //break;                
                 }
        }
      
alert("drago.left =" + rect.left + "  newparent=" + divs[i].id + "  son (.left)  =" + rl);;
      newparent.appendChild(drago)                   
drago.style.left=0+"px";
drago = null;
}
function on_mouse_move(event) {
        event.stopPropagation();
        if (mouse_down && drago != null) { // && event.target.className="dragg"
                drago.style.left = event.clientX - dX + 'px';
                drago.style.top = event.clientY - dY + 'px';
        }
}
document.onmousemove = on_mouse_move; 
document.onmouseup = on_mouse_up; 
</script>
</head> 
<body> 
<div  id="editeur" contenteditable="true" width 500 height 500 style="border:2 px solid magenta; height:500px;width:500px;" > 
<div  id="div41" class="dragg" style="border: 3px solid red; left: 43px; top: 26.6px; width: 104px; height: 54px; position: absolute; z-index: 30;"  onmousedown="on_mouse_down_square(event)" >div41</div>
<div  id="div40" class="dragg" style="border: 2px solid blue; left: 115.2px; top: 101.79px; width: 186px; height: 138px; position: absolute; z-index: 30;"  onmousedown="on_mouse_down_square(event)" >div40</div>
<div  id="div42" class="dragg" style="border: 2px solid green; left: 332.6px; top: 72.39px; width: 267px; height: 230px; position: absolute; z-index: 30;"  onmousedown="on_mouse_down_square(event)" >div42</div>
</div></body> 
</html>

peut etre que l'on va finr par trouver la version universselle

[Beginner.]

Ok j’espère pouvoir regarder ce bébé demain...

Je pense regarder aussi pour Chrome...

[patricktoulon]

bonjour beguinner

pour le computedstyle au cas ou le style serait dans des balises style c'est pas ca pour IE
Comment consulter le style réel d'un objet ?

[Beginner.]

Salut,

J'ai regardé ton code et à première vue il semble que tu n'as pas utilisé le glisser/déposer natif, c'est d'ailleurs peut-être pour cela que ça marche car je crois que le natif pose problème (il me semble qu'il a été critiqué).

Il manque le "déposer" dans un parent, c'est ça ?

[Beginner.]

Je viens de tester de plus prés et le code fonctionne bien sur Chrome (je n'ai pas regardé sur FF mais ça devrait marcher aussi)...

Par contre le break que tu as mis en commentaire est nécessaire.

Et j'ai remplacé l'alert par console.log et divs[i].id par newparent.id (car dans certains cas divs[i] n'est pas défini)...

Il y a des petites choses à régler mais dans le principe je trouve ton code très intéressant et instructif, ça me rappelle un autre que j'avais vu, il est ancien et n'utilise pas lui non plus le glisser/déposer natif...

[Beginner.]

Ah oui c'est une bonne fonctionnalité ça... Je vois qu'il y a les fameux rectangles autour de l'image/de la div comme sur FF mais sur Chrome il n'y en a pas du coup c'est moins intuitif... Je me demande si ça vaut le coup et si ce n'est pas trop difficile de l'ajouter...

On pourrait peut-être ajouter cette fonctionnalité "redimensionnement", je vois qu'elle est disponible avec Jquery : http://jqueryui.com/resizable (mais il n'y a pas les petits rectangles).

[patricktoulon]

oui le deplacer fonctionne
mais on perd l'hérédité du conteneditable ne me demande pas pourquoi j'en sais fichtrement rien
de ce fait on perd aussi le resizable natif dans un contenteditable y compris l'edition bref on peu plus rien faire
de plus ce model dans IE meme souris relachée il garde le move si je bloque pas le contenteditable provisoirement
pour le moment c'est l'attachement au parent que j'arrive pas a caller correctement avec ce model pour FF
MAIS entre nous c'est pas demain la veille que je vais utiliser FF
je le fait c'est pour les autres moi je ne m'en servirais pas n'utilsant pas FF
JE l'ai installer que pour les tests
mais ca m'eloigne de mon projet initial
je te donne le model la ou j'en suis
la seule chose a corriger c'est le placement au up de la souris sur nouveau parent

Code html :

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
 
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<meta charset="utf-8"> 
<title>Déplacer un élément par  la souris FIREFOX</title> 
<style> 
#square 
{ 
  position:absolute; 
  height:100px; 
  width:100px; 
  background-color:red; 
} 
 
</style> 
<script type="text/javascript">
var mouse_down = false; 
var drago;
var dx;
var dy;
var editeur;
function on_mouse_down_square(event) { 
      var editeur=document.getElementById("editeur");
            editeur.contentEditable=false;
          if(mouse_down===false && drago==null ){
               mouse_down=true;
               drago=event.target;
               //editeur.contentEditable=false;
               dx=event.clientX-drago.offsetLeft;
               dy=event.clientY-drago.offsetTop;
            } 
} 
 function on_mouse_up(event) {
        mouse_down = false;
        var rect = drago.getBoundingClientRect();
        var divs = document.getElementById("editeur").getElementsByTagName("DIV");
        console.log(divs.length);
        var newparent = document.getElementById("editeur");
        for (var i = 0; i < divs.length; i++) {
                var rect2 = divs[i].getBoundingClientRect();
                if (rect2.left < rect.left && rect2.top < rect.top && rect2.right > rect.right && rect2.bottom > rect.bottom) {
                        var newparent = divs[i];
                        var rl = rect2.left;
                        var rt = rect2.top;
                        var nx = event.clientX - rl;
                        var ny = event.clientY - rt;
                        //break;
                }
        }
        
        if (newparent.id != "editeur" && newparent != drago.parentElement) {
                newparent.appendChild(drago)
                drago.style.left = rect.left-rl+ "px"
                drago.style.left = rect.left-rt+ "px"
        }
         else{
              if (newparent.id ==="editeur"){
                newparent.appendChild(drago)
                drago.style.left=rect.left+"px";
                drago.style.top=rect.top +"px";
              }
             }
 
drago = null;
        document.getElementById("editeur").contentEditable = true;
}
function on_mouse_move(event) { 
     event.stopPropagation();
          if (mouse_down && drago!=null ) { // && event.target.className="dragg"
             drago.style.left = event.clientX-dx+'px'; 
             drago.style.top = event.clientY-dy+'px'; 
           } 
} 
document.onmousemove = on_mouse_move; 
document.onmouseup = on_mouse_up; 
</script>
</head> 
<body> 
<div id="editeur" contenteditable="true" width="" 500="" height="" style="border:2 px solid magenta; height:500px;width:500px;"> 
<div id="div41" class="dragg" onmousedown="on_mouse_down_square(event)" style="border: 3px solid red;  left: 43px; top: 26.6px; width: 104px; height: 54px; position: absolute; z-index: 30;">div41</div>
<div id="div40" class="dragg" onmousedown="on_mouse_down_square(event)" style="border: 6px solid blue; left: 257px; top: 173px; width: 186px; height: 138px; position: absolute; z-index: 30;">div40</div>
<div id="div42" class="dragg" onmousedown="on_mouse_down_square(event)" style="border:10px solid green; left: 360px; top: 107px; width: 267px; height: 230px; position: absolute; z-index: 30;">div42</div>
</div> 
 
</body></html>

[Beginner.]

oui le deplacer fonctionne
mais on perd l'hérédité du conteneditable ne me demande pas pourquoi j'en sais fichtrement rien

Pas sur Chrome il faut que je regarde FF alors...

[Beginner.]

Je viens de voir rapidement sur FF et je soupçonne un problème auquel j'avais déjà pensé, je pense qu'il y a conflit entre ton code et la gestion native de FF qui est plus complète que sur Chrome.

C'est dommage mais là le fait que FF en fasse beaucoup n'est pas un avantage...
Avec FF il semble qu'il faille inhiber la gestion native, à tester...

[Beginner.]

Je vais ouvrir un fil sur le copier/coller, je ne pensais pas que c'était aussi compliqué...

L'utilises-tu dans ton éditeur ?