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

Version imprimable

29/11/2011, 16h22
defacta

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

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.

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

Un petit exemple :

Code:

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>

29/11/2011, 21h29
defacta

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

Salut,

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

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:

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:

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

Merci,
Vincent.

30/11/2011, 09h59
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;
...
30/11/2011, 10h27
defacta

Citation:

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... ;)
30/11/2011, 10h43
javatwister

bon, pour aller vite, t'es en train de faire un chat ou bien?
30/11/2011, 11h11
defacta

Citation:

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...
30/11/2011, 11h24
javatwister

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;

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:

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:

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:

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.

:(

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

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:

1 2 // transfert DIV_modify_page' dans 'DIV_edit_page' moveDiv( 'DIV_modify_page', 'DIV_edit_page');
et au retour
Code:

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

30/11/2011, 15h41
defacta
Citation:
Envoyé par NoSmoking

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

Code:

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:

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

et au retour

Code:

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 :?