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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager