Drag and Drop [Résolu]

Signaler
Messages postés
10
Date d'inscription
vendredi 6 février 2009
Statut
Membre
Dernière intervention
6 février 2009
-
Messages postés
132
Date d'inscription
dimanche 8 janvier 2006
Statut
Membre
Dernière intervention
15 février 2011
-
Bonsoir,

Je suis a la recherche d'un script de drag and drop, je suis tombé sur scriptaculous et sur rico...
Mon problème est le suivant:
j'aimerai pouvoir dragger des éléments, et les déplacer dans des zones droppables définis et spécifiques à chaque élément draggable...
un élément draggable peut être déplacer dans plusieurs zones ( communes a d'autre élément draggables ) et s'il n'est pas lâché ou il faut il retourne a sa place...

Avec scriptaculous j'ai trouvé ca :

new Draggable('div_1',{revert:true}); qui permet de deplacer l'élément et de le faire retourner a sa place

et

new Draggable('div_2');
Droppables.add('div_1',{overlap:'horizontal',onDrop:function}); qui appelle la fonction si la div_2 a plus de 50% horizontalement sur la div_1...

et avec Rico :

http://demos.openrico.org/demos/drag_and_drop_custom_dropzone

Bref voila...
En espérant que vous pourrez m'aider...

Merci

20 réponses

Messages postés
132
Date d'inscription
dimanche 8 janvier 2006
Statut
Membre
Dernière intervention
15 février 2011

Salut,

Voici un lien qui te permettra peut etre de mieux comprendre :

http://github.com/madrobby/scriptaculous/wikis/droppables

En gros :
<script type="text/javascript">
new Draggable('Id_De_Element_A_Deplacer', { revert: true });

  Droppables.add('
Id_De_Element_Recepteur
', { 
    accept: 'Class
_De_Element_Deplacer
',
    hoverclass: 'Class_Effectuer_Sur_Recepteur_En_Cas_De_drop',
    onDrop: function() { Ce qui est provoquer en cas de drop }
  });
</script>


Cordialement
Messages postés
132
Date d'inscription
dimanche 8 janvier 2006
Statut
Membre
Dernière intervention
15 février 2011

PS : tu peux aussi faire :
<script type="text/javascript">
new Draggable('Id_De_Element_A_Deplacer', { revert: true });

<code class="html">Droppables.add('
Id_De_Element_Recepteur1
', { 
    accept: 'Class
_De_Element_Deplacer
',
    hoverclass: 'Class_Effectuer_Sur_Recepteur_En_Cas_De_drop',
    onDrop: function() { Ce qui est provoquer en cas de drop }

</code>
Droppables.add('
Id_De_Element_Recepteur2
', { 
    accept: 'Class
_De_Element_Deplacer
',
    hoverclass: 'Class_Effectuer_Sur_Recepteur_En_Cas_De_drop',
    onDrop: function() { Ce qui est provoquer en cas de drop }


Droppables.add('
Id_De_Element_Recepteur3
', { 
    accept: 'Class
_De_Element_Deplacer
',
    hoverclass: 'Class_Effectuer_Sur_Recepteur_En_Cas_De_drop',
    onDrop: function() { Ce qui est provoquer en cas de drop }


Droppables.add('
Id_De_Element_Recepteur
4', { 
    accept: 'Class
_De_Element_Deplacer
',
    hoverclass: 'Class_Effectuer_Sur_Recepteur_En_Cas_De_drop',
    onDrop: function() { Ce qui est provoquer en cas de drop }

  });
</script>

Mais je te conseil de faire une fonction pour plus de clarté ;)
Messages postés
10
Date d'inscription
vendredi 6 février 2009
Statut
Membre
Dernière intervention
6 février 2009

Merci beaucoup!!
J'ai réussi a me débrouiller avec cette exemple...
Messages postés
132
Date d'inscription
dimanche 8 janvier 2006
Statut
Membre
Dernière intervention
15 février 2011

Il te reste plus qu'a valider la confirmation de réponse :)

Cordialement Banban
Messages postés
10
Date d'inscription
vendredi 6 février 2009
Statut
Membre
Dernière intervention
6 février 2009

En fait ca m'a bien permis d'avancer, mais euh... je rebloque ^^
voici le code : (j'utilise le moteur de template smarty...)

    {foreach from=$items item=item}                                                             <!-- création des objet draggable -->
     

       
   

    {/foreach}
   
       
                                                            <!-- objet droppable -->
       
       

       
       

       
       

{literal}
<script type="text/javascript">

for(i=1;i<{/literal}{$nbr}{literal};i++){          // la variable nbr contient le nombre d'item draggable                       
    new Draggable('draggable_demo'+i, {
    revert: true
  });
}
 
 
{/literal}   
{foreach from=$rec item=rec}                                                      // rec est un tableau (1,2...) pour les items droppable
    {literal}
   
        var drop = '{/literal}droppable_demo{$rec}{literal}';          // id des div droppable
   
    {/literal}
        {foreach from=$items item=item}                                          // pour chaque élément draggable
            {if $item.lieu == $rec}                                                      // si il est droppable sur la bonne div
                {literal}   
                var id_item = {/literal}{$item.id}{literal};
                Droppables.add(drop, {
                                accept: 'draggable'+id_item,
                                hoverclass: 'hover',
                                onDrop: function (){                      //fonction supprimant la div draggable et changeant le contenu de la div droppable
                                    document.getElementById(drop).innerHTML  = document.getElementById('draggable_demo'+id_item).innerHTML;
                                    var mynode = document.getElementById('draggable_demo'+id_item);
                                    var parent = mynode.parentNode;
                                    parent.removeChild(mynode);
                                    }             
                                });
                {/literal}
            {/if}
        {/foreach}
{/foreach}
</script>

Bref ca marche presque ><
Mais des erreurs subsistent et je ne vois pas d'ou elles peuvent venir...
D'avance merci
Messages postés
132
Date d'inscription
dimanche 8 janvier 2006
Statut
Membre
Dernière intervention
15 février 2011

sous FF tu as une console d erreur, fais un clique droit sur les erreur et copie les histoire qu on voit d ou ca vient ?

Cordialement Banban
Messages postés
132
Date d'inscription
dimanche 8 janvier 2006
Statut
Membre
Dernière intervention
15 février 2011

 border-radius c est pas plus -mos-border-radius pour les angle arrondi ? a verifier mais n'est pas valide W3C erreur non importante

 -moz-box-shadow connais pas

Mais en gros tu as que des avertissement mais aucune alerte donc c'est que tes script s'execute

Cordialement Banban
Messages postés
10
Date d'inscription
vendredi 6 février 2009
Statut
Membre
Dernière intervention
6 février 2009

Bon j'ai repris mon script...
j'utilise le moins possible les fonctions smarty pour rester clair ^^
Mais j'ai encore un soucis... le script d'abord:

<script type="text/javascript">
 function tab(id,name,lieu) {
    this.id = id;
    this.name = name;
    this.lieu = lieu;
 }

for(i=1;i<{/literal}{$nbr}{literal};i++){
    new Draggable('drag_id'+i, {
    revert: true
  });
}

var nbr = 0;
item = new Array();
{/literal}   
    {foreach from=$items item=test}
        {literal}
            item[nbr] = new tab({/literal}{$test.id}{literal},'{/literal}{$test.name}{literal}',{/literal}{$test.lieu}{literal});
            nbr++;   
        {/literal}
    {/foreach}
{literal}

for(j=1;j<3;j++){
    for(i=0;i < nbr; i++){
        if(item[i].lieu == j){

            var drag_cla = 'drag_cla'+item[i].id;
            var drag_id = 'drag_id'+item[i].id;
            var drop = 'drop'+j;
            Droppables.add(drop, {accept: drag_cla,hoverclass: 'hover',onDrop: function() { $(drop).innerHTML = $(drag_id).innerHTML ; }});   
        }
    }
}
</script>

J'ai bien mes draggables qui bougent... les div droppables marchent aussi... mais quand je drop un objet... ba seul le dernier objet draggable est pris en compte sur la derniere div droppable... et je vois pas pourquoi T_T

D'avance merci...
Messages postés
132
Date d'inscription
dimanche 8 janvier 2006
Statut
Membre
Dernière intervention
15 février 2011

Je suis un peu perdu peux tu me dire svp combien d'élément sont draggable et combien sont récepteur ?

Cordialement Banban
Messages postés
10
Date d'inscription
vendredi 6 février 2009
Statut
Membre
Dernière intervention
6 février 2009

Pour le moment j'ai 3 éléments draggables et 2 éléments droppables,
Pour les 3 éléments draggables je definis par quel élément droppables il est accepté...
Messages postés
132
Date d'inscription
dimanche 8 janvier 2006
Statut
Membre
Dernière intervention
15 février 2011

A mon avis c'est un problème qui doit être vers :

var drag_cla = 'drag_cla'+item[i].id;

aurais tu une url ou on peut voir le code en action car la il ne me parle pas de trop.

PS ; par contre moi je veux bien apprendre aussi et :

{/literal}   
    {foreach from=$items item=test}
        {literal}
   
        item[nbr] = new
tab({/literal}{$test.id}{literal},'{/literal}{$test.name}{literal}',{/literal}{$test.lieu}{literal});
            nbr++;   
        {/literal}
    {/foreach}
{literal}

je ne connais peux tu m'expliquer ce que c'est svp surtout : {foreach from=$items item=test} et  {/literal}{literal}

Merci

Cordialement Banban
Messages postés
10
Date d'inscription
vendredi 6 février 2009
Statut
Membre
Dernière intervention
6 février 2009

http://killion666.free.fr/



Pour ce qui est de la syntaxe bizarre, c'est du au moteur de template que j'utilise => smarty
pour separer le code php du code html,js...
{literal}{/literal} permet d'exploiter le code qui se trouve entre sans passer par le compilateur smarty, sinon les accolades sont mal interpreter
{foreach from=$items item=test} est une boucle comme son nom l'indique, du meme type que php, foreach($items as tes) serait l'equivalent...
Messages postés
132
Date d'inscription
dimanche 8 janvier 2006
Statut
Membre
Dernière intervention
15 février 2011

var nbr = 0;
item = new Array();
   
item[nbr] = new tab(1,'arc',1);
nbr++;   

item[nbr] = new tab(2,'epee',1);
nbr++;   

item[nbr] = new tab(3,'bouclier',2);
nbr++;   

for(j=1;j<3;j++){
    for(i=0;i < nbr; i++){}
}

là nbr = 3 ?

donc 4 boucles au lieu de 3 si j'ai bien compris c'est peut-etre la derniere boucle qui fait un conflit ?

Cordialement Banban
Messages postés
10
Date d'inscription
vendredi 6 février 2009
Statut
Membre
Dernière intervention
6 février 2009

nbr est bien egal a 3 mais dans la boucle c'est < et non <= donc on a bien que 3 boucles ><
Messages postés
132
Date d'inscription
dimanche 8 janvier 2006
Statut
Membre
Dernière intervention
15 février 2011

Je suis tjr dessus je cherche :)

Cordialement Banban
Messages postés
132
Date d'inscription
dimanche 8 janvier 2006
Statut
Membre
Dernière intervention
15 février 2011

Excuse j'était sur autre chose
et comme ca tu aimes pas ?

 


 


 






<script type="text/javascript">

for(i=1;i<4;i++){
    new Draggable('drag_id'+i, {revert: true});
}

Droppables.add('drop1', {accept: 'drag_cla1',hoverclass: 'hover',onDrop: function(element) { $('drop1').innerHTML = element.innerHTML ; }});   
Droppables.add('drop2', {accept: 'drag_cla2',hoverclass: 'hover',onDrop: function(element) { $('drop2').innerHTML = element.innerHTML ; }});   

</script>

Cordialement Banban
Messages postés
10
Date d'inscription
vendredi 6 février 2009
Statut
Membre
Dernière intervention
6 février 2009

Hum le truc c'est que j'ai un nombre variant d'image draggable ><
Mais merci pour tout, je sais pas d'ou vient l'erreur, mais euh... j'ai réecrit le script avec php, et je l'affiche aprés...
C'est pas super super... mais ca marche nickel XD

Merci pour tout!!!

$js_drag = "
for(i=1;i<".$nbr.";i++){
    new Draggable('drag_id'+i, {revert: true});
}";

$js_drop = "";
foreach($items as $item){
    $js_drop .= "Droppables.add('drop".$item['lieu']."', {accept: 'drag_cla".$item['id']."',hoverclass: 'hover',
                onDrop: function() { $('drop".$item['lieu']."').innerHTML = $('drag_id".$item['id']."').innerHTML ;
                                    var mynode = document.getElementById('drag_id".$item['id']."');
                                    var parent = mynode.parentNode;
                                    parent.removeChild(mynode); }});";
}

et j'affiche ces 2 variables...
Messages postés
132
Date d'inscription
dimanche 8 janvier 2006
Statut
Membre
Dernière intervention
15 février 2011

Au lieu de :
onDrop: function() { $('drop".$item['lieu']."').innerHTML = $('drag_id".$item['id']."').innerHTML ;

Place

onDrop: function(element) { $('drop".$item['lieu']."').innerHTML = element.innerHTML ;

Sinon moi aussi je le gere en PHP :)

Cordialement Banban
Messages postés
10
Date d'inscription
vendredi 6 février 2009
Statut
Membre
Dernière intervention
6 février 2009

Avertissement : Propriété « border-radius » inconnue.  Déclaration abandonnée.
Fichier Source : http://127.0.0.1/legacy/legacy/js/modalbox/modalbox.css
Ligne : 68

Avertissement : Propriété « -moz-box-shadow » inconnue.  Déclaration abandonnée.
Fichier Source : http://127.0.0.1/legacy/legacy/js/modalbox/modalbox.css
Ligne : 74

Avertissement : Propriété « box-shadow » inconnue.  Déclaration abandonnée.
Fichier Source : http://127.0.0.1/legacy/legacy/js/modalbox/modalbox.css
Ligne : 75

Avertissement : Propriété « border-radius » inconnue.  Déclaration abandonnée.
Fichier Source : http://127.0.0.1/legacy/legacy/js/modalbox/modalbox.css
Ligne : 79
Messages postés
132
Date d'inscription
dimanche 8 janvier 2006
Statut
Membre
Dernière intervention
15 février 2011

var mynode = document.getElementById('drag_id".$item['id']."');

par

var mynode = $('drag_id".$item['id']."');

Cordialement Banban