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...