Drag la copie de l'objet

**hihi30** · 11/03/2009, 14h59

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

**gwyohm** · 11/03/2009, 16h27

tu peux utiliser l'option ghosting à la création du draggable

**hihi30** · 11/03/2009, 16h35

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

**hihi30** · 11/03/2009, 17h13

mon code pour draggable :

Code :

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

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

mais je veux garder l'objet sur la liste initiale

**gwyohm** · 11/03/2009, 18h15

Quand tu drop l'élément, tu veux donc le dupliquer complètement ?

**hihi30** · 11/03/2009, 18h19

c'est exactement ca , si t'as une solution ca m'aiderai beaucuop

**gwyohm** · 11/03/2009, 18h44

tu peux faire un drag.element.cloneNode(true)

**hihi30** · 12/03/2009, 10h56

merci pour ta reponse, mais ca je le met au moment du drag ou du drop ??

**gwyohm** · 12/03/2009, 11h07

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

**hihi30** · 12/03/2009, 13h52

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

Code :

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

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

avec

Code :

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

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>

**gwyohm** · 12/03/2009, 14h24

Si indica est l'élément div, alors c'est :

Code :

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

1
2
 
indica.cloneNode(true);

**hihi30** · 12/03/2009, 14h27

non, indica c'est l'id du div

**gwyohm** · 12/03/2009, 14h31

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

**hihi30** · 12/03/2009, 14h41

en faites j'ai changé ma fonction moveitem :

Code :

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

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

**gwyohm** · 12/03/2009, 14h54

c'est pas lié au style ? Ca veut dire quoi "il me le met n'importe comment"

**hihi30** · 12/03/2009, 15h01

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 :

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

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 :

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

1
2
3
// indica.parentNode.removeChild(indica);
// indica.cloneNode(true);
  listeDimInd.appendChild(indica.cloneNode(true));

j'espere que j'ai bien expliqué

**gwyohm** · 12/03/2009, 15h21

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 :

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

**hihi30** · 12/03/2009, 15h27

ok merci je teste ca

**hihi30** · 12/03/2009, 16h03

franchement , merci beaucoup
ca marche nickel

en faites j'ai modifié juste ma fonction moveitem

Code :

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

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

Drag la copie de l'objet [script.aculo.us]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager