Drag la copie de l'objet

Version imprimable

11/03/2009, 14h59
hihi30

Drag la copie de l'objet

Bonjour,
j'ai une question pour le drag avec le scriptaculous, en faites j'arrive a faire le drag and drop mais le probleme c'est que je veux que l'objet que j'ai deplacer , je le garde , je m'explique :
j'ai une liste d'objet a deplacer, quand je deplace je l'ai sur le droppable mais je voudrais le garder sur la liste
merci beaucoup pour votre aide
11/03/2009, 16h27
gwyohm

tu peux utiliser l'option ghosting à la création du draggable
11/03/2009, 16h35
hihi30

j'utilise le ghosting pour le draggable , mais quand je lache la souris je ne l'ai plus sur la liste initiale , je l'est que sur l'objet finale
11/03/2009, 17h13
hihi30

mon code pour draggable :

Code:

new Draggable($(structure.id), {ghosting: true, revert: true});

mais je veux garder l'objet sur la liste initiale
11/03/2009, 18h15
gwyohm

Quand tu drop l'élément, tu veux donc le dupliquer complètement ?
11/03/2009, 18h19
hihi30

c'est exactement ca , si t'as une solution ca m'aiderai beaucuop
11/03/2009, 18h44
gwyohm

tu peux faire un drag.element.cloneNode(true)
12/03/2009, 10h56
hihi30

merci pour ta reponse, mais ca je le met au moment du drag ou du drop ??
12/03/2009, 11h07
gwyohm

Moi je le ferai au moment du drop..

D'après ce que tu décris, au moment du drop, tu insères le draggable dans le droppable.
L'idée serait donc au moment du drop de cloner le noeud, de l'insérer dans le droppable et de laisser le draggable retourner à sa place...

si j'ai bien compris , il faut faire comme ca , mais ca me donne une erreur , "indica.element is undefined"

Code:

Droppables.add('listeDimInd', { onDrop: moveItem});

avec
Code:

1 2 3 4 5 6 7 8 9 function moveItem( indica,listeDimInd){ if (!listeDimInd.cleared) { listeDimInd.innerHTML = ''; listeDimInd.cleared = true; } indica.parentNode.removeChild(indica); indica.element.cloneNode(true); listeDimInd.appendChild(indica); }
avec indica et listeDimInd qui sont des <div>

12/03/2009, 14h24
gwyohm
Si indica est l'élément div, alors c'est :
Code:

1 2 indica.cloneNode(true);
12/03/2009, 14h27
hihi30

non, indica c'est l'id du div
12/03/2009, 14h31
gwyohm

d'après la doc c'est l'élément donc ca devrait marcher. Mais tu peux aussi mettre $(indica).cloneNode(true);

en faites j'ai changé ma fonction moveitem :
Code:

1 2 3 4 5 6 7 8 function moveItem( indica,listeDimInd){ if (!listeDimInd.cleared) { listeDimInd.innerHTML = ''; listeDimInd.cleared = true; } listeDimInd.appendChild(indica.cloneNode(true)); }
la j'ai un autre probleme, en faites il me clone l'objet tu as raison, il retourne a sa place d'origine, mais sur la div ou je drop il me le met n'importe comment

12/03/2009, 14h54
gwyohm

c'est pas lié au style ? Ca veut dire quoi "il me le met n'importe comment"
12/03/2009, 15h01
hihi30
en faites avant quand je lache l'objet à l'interieur du div il me le met bien dans le div, mais j'avais plus l'objet dans ca position initiale
voila l'ancien code
Code:

1 2 3 indica.parentNode.removeChild(indica); indica.cloneNode(true); listeDimInd.appendChild(indica);
mais maintenant ca le met a l'exterieur du div , mais j'ai bien l'objet dans le div source (drag) et le div cible (drop)
Code:

1 2 3 // indica.parentNode.removeChild(indica); // indica.cloneNode(true); listeDimInd.appendChild(indica.cloneNode(true));
j'espere que j'ai bien expliqué

J'ai pas tout compris mais je pense avoir compris ton probleme :
Quand tu clones l'element, tu recopies tout dont les styles qui sont modifiés pendant le drag. C'est pour ca que ca fait n'importe quoi...

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>test</title>
  <script type="text/javascript" src="prototype.js"></script>
  <script type="text/javascript" src="scriptaculous/scriptaculous.js"></script>
 
  <style type="text/css">
    #pool {
      float:left;
      width:200px;
      height:500px;
      background-color:green;
    }
 
    .drag {
      float:left;
      background-color:yellow;
    }
 
    #drop {
      width:200px;
      float:right;
      height:500px;
      background-color:blue;
    }
  </style>
</head>
<body>
<div id="pool">
  <div class="drag" >
    <h2>Un titre</h2>
    <p>
      un texte <a href="#jambon">un lien</a>
    </p>
  </div>
</div>
<div id="drop">
 
</div>
<script type="text/javascript">
  function moveItem(drag, drop) {
    var clone = drag.cloneNode(true);
    // enlevons les styles
    drop.insert(clone.writeAttribute("style", ""));
  }
 
  $$(".drag").each( function(draggableElement) {
    new Draggable(draggableElement, {ghosting: true, revert: true});
  });
 
  Droppables.add("drop", { onDrop: moveItem });
</script>
</body>
</html>

12/03/2009, 15h27
hihi30

ok merci je teste ca

franchement , merci beaucoup
ca marche nickel

en faites j'ai modifié juste ma fonction moveitem

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function moveItem( indica,listeDimInd){
	   if (!listeDimInd.cleared) {
		   listeDimInd.innerHTML = '';
		   listeDimInd.cleared = true;
	   }
 
	   copiNoeud =  indica.cloneNode(true);
	   listeDimInd.appendChild(copiNoeud);
	   copiNoeud.style.position = "relative";
	   copiNoeud.style.left = "0px";
	   copiNoeud.style.top = "0px";
 
}

merci