Déplacer une <div>, innerHTML et cloneNode.

**defacta** · 29/11/2011, 16h22

Salut,

J'ai une div cachée sur laquelle il y a des onClick.
Cette div, il me faut pouvoir la déplacer dynamiquement avec JavaScript dans une autre div après le chargement d'une iframe.
Le problème c'est que quand je fais un innerHTML, son contenu est bien affiché dans l'autre div mais toute les actions qui passent par document.getElementById sont effectués dans la div cachée et non pas dans la cible.
Est-il possible de déplacer une div dans une autre div ?
J'ai essayé de voir avec cloneNode(true); mais j'ai pas très bien compris comment cela marchait et si cela permettait de déplacer une div.

Merci,
Vincent.

**NoSmoking** · 29/11/2011, 18h58

Bonjour,
pas besoin de sortir l'artillerie lourde, un simple appendChild suffit.

Un petit exemple :

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
div {
  border : 1px solid #e0e0e0;
  width: 150px;
  height : 150px;
}
#div_move{
  background-color : #e0e0f0;
  border : 1px solid #8080f0;
  width : 100px;
  height : 100px;
}
</style>
<script type="text/javascript">
function moveDiv( id_elem, id_dest){
  var oElem = document.getElementById( id_elem);
  var oDest = document.getElementById( id_dest);
  oDest.appendChild( oElem);
}
</script>
</head>
<body>
<button onclick="moveDiv( 'div_move', 'div_dest');">Déplace</button>
<div id="div_srce">
  DIV source...
  <div id="div_move" onclick="alert(this.id);">
  </div>
</div>
<div id="div_dest">
DIV destination...
</div>
</body>
</html>

**defacta** · 29/11/2011, 21h29

Merci, j'ai vraiment galéré alors que ça parait simple...

**defacta** · 30/11/2011, 08h32

Salut,

Donc j'ai pu essayer et ça marche. Mon code ressemble à ceci:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div style="position:absolute;visibility:hidden;">
<div id="DIV_modify_page">
 <div id="myNicPanel" style="padding-left:3px; width: 28px;"></div>
<div id="myInstance1">Du texte...</div>
<script type="text/javascript" src="nicEdit.js"></script><script language="JavaScript">
     bkLib.onDomLoaded(function() {
        var myNicEditor = new nicEditor();
        myNicEditor.setPanel('myNicPanel');
        myNicEditor.addInstance('myInstance1');
     });
</script>
</div>
</div>

Et j'arrive à déplacer l'éditeur comme ceci:

Code :

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

1
2
3
4
5
 
  get('DIV_page').innerHTML = '' ; // Je vide la destination, get signifie getElementById
  var oElem = WP.get('DIV_modify_page'); //WP signifie window.parent
  var oDest = WP.get('DIV_page');
  oDest.appendChild( oElem); //Je déplace.

Le petit soucis c'est que je ne peux le faire qu'une fois, la page n'est jamais rechargée entièrement.

Est-il possible de cloner une et avoir les events qui marchent dans dans la div et ces clones ? Comme ça je ne vide jamais DIV_modify_page en la déplaçant mais je la clone dans DIV_page.

J'ai essayé

Code :

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

1
2
3
4
 
  var oElem = WP.get('DIV_modify_page');
  var oDest = WP.get('DIV_page');
  oDest = oElem.cloneNode(true);

mais sans succés.

Merci,
Vincent.

**javatwister** · 30/11/2011, 09h59

désolé mais tes infos et ton code ne sont pas assez clairs pour qu'on puisse t'aider efficacement;

- on ne sait rien de 'DIV_page';
- on ne sait pas pourquoi tu fais appel à un script .js au milieu d'une div;
...

**defacta** · 30/11/2011, 10h27

Envoyé par javatwister

désolé mais tes infos et ton code ne sont pas assez clairs pour qu'on puisse t'aider efficacement;

- on ne sait rien de 'DIV_page';
- on ne sait pas pourquoi tu fais appel à un script .js au milieu d'une div;
...

DIV_page va contenir soit du texte soit le contenu de DIV_modify_page qui permet de modifier le texte.
Ensuite, j'ai enlevé le script dans la div était une erreur, je l'ai mis après la div...

**javatwister** · 30/11/2011, 10h43

bon, pour aller vite, t'es en train de faire un chat ou bien?

**defacta** · 30/11/2011, 11h11

Envoyé par javatwister

bon, pour aller vite, t'es en train de faire un chat ou bien?

Non, un système où on peut publier de livres mais le but c'est de ne pas recharger toute la page quand on veut modifier simplement la page 3 du chapitre 2 par exemple...

**javatwister** · 30/11/2011, 11h24

mouais, toujours est-il que je ne vois toujours pas ce que ça donne... et que je ne sais toujours pas où il y a des onclick;

**defacta** · 30/11/2011, 14h03

Ca vient de nicedit, c'est un éditeur de texte et ca modifie myNicPanel et myInstance1:
http://nicedit.com/

J'ai modifié le code comme ceci:

Code :

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

1
2
3
4
5
6
7
8
9
10
<div id="DIV_editor">
  <div id="DIV_modify_page"> Le content de nicedit...
  </div>
</div>
 
function moveEditor(dest) {
  var oElem = get('DIV_editor') ;
  var oDest = dest ;
  oDest.appendChild(oElem);
}

La si j'appelle moveEditor comme ceci:

Code :

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

  moveEditor(get('DIV_edit_page')) ;

ca marche, et le contenu de DIV_editor va bien dans DIV_edit_page.
Mais j'aimerai remettre DIV_editor comme il était, donc mettre ce qu'il y a dans DIV_edit_page dans DIV_editor:
J'essaie comme ceci:

Code :

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

1
2
3
4
5
function JS_MoveEdit() {
    var oElem = get('DIV_edit_page')  ;
    var oDest = get('DIV_editor') ;
    oDest.appendChild(oElem);
}

Je crois que c'est un problème de node, comme si "DIV_editor" n'existait plus parceque j'ai mis son contenu dans DIV_edit_page avec la fonction moveEditor.

Firefox me sort cette erreur:
firefox node cannot be inserted at the specified point in the hierarchy.

**NoSmoking** · 30/11/2011, 15h23

pourquoi faire 2 fonctions là où une seule suffit?

Code :

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

1
2
3
4
5
function moveDiv( id_elem, id_dest){
  var oElem = document.getElementById( id_elem);
  var oDest = document.getElementById( id_dest);
  oDest.appendChild( oElem);
}

tu te trompes d'oElem et de oDest dans ton retour, oElem est toujours le même à savoir 'DIV_modify_page'.

Code :

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

1
2
// transfert DIV_modify_page' dans 'DIV_edit_page'
moveDiv( 'DIV_modify_page', 'DIV_edit_page');

et au retour

Code :

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

1
2
// transfert 'DIV_modify_page' dans  'DIV_editor');
moveDiv( 'DIV_modify_page', 'DIV_editor');

**defacta** · 30/11/2011, 15h41

Envoyé par NoSmoking

pourquoi faire 2 fonctions là où une seule suffit?

Code :

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

1
2
3
4
5
function moveDiv( id_elem, id_dest){
  var oElem = document.getElementById( id_elem);
  var oDest = document.getElementById( id_dest);
  oDest.appendChild( oElem);
}

tu te trompes d'oElem et de oDest dans ton retour, oElem est toujours le même à savoir 'DIV_modify_page'.

Code :

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

1
2
// transfert DIV_modify_page' dans 'DIV_edit_page'
moveDiv( 'DIV_modify_page', 'DIV_edit_page');

et au retour

Code :

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

1
2
// transfert 'DIV_modify_page' dans  'DIV_editor');
moveDiv( 'DIV_modify_page', 'DIV_editor');

Oui c'était ça, bêtement j’essayais de mettre DIV_editor dans DIV_editor alors que c'est DIV_modify_page qu'il me fallait bouger.

J'en ai perdu quelques cheveux

Déplacer une <div>, innerHTML et cloneNode.

JavaScript

Discussions similaires

Partager

Partager