Sujet Précédent Sujet Suivant

Drag and Drop

Résolu
Killion Messages postés 10 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 6 février 2009 - 17 juil. 2008 à 20:21
banbanfr Messages postés 132 Date d'inscription dimanche 8 janvier 2006 Statut Membre Dernière intervention 15 février 2011 - 19 juil. 2008 à 17:00
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

Réponse 1 / 20
banbanfr Messages postés 132 Date d'inscription dimanche 8 janvier 2006 Statut Membre Dernière intervention 15 février 2011
18 juil. 2008 à 01:57
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
3
Réponse 2 / 20
banbanfr Messages postés 132 Date d'inscription dimanche 8 janvier 2006 Statut Membre Dernière intervention 15 février 2011
18 juil. 2008 à 01:59
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é ;)
3
Réponse 3 / 20
Killion Messages postés 10 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 6 février 2009
18 juil. 2008 à 15:23
Merci beaucoup!!
J'ai réussi a me débrouiller avec cette exemple...
3
Réponse 4 / 20
banbanfr Messages postés 132 Date d'inscription dimanche 8 janvier 2006 Statut Membre Dernière intervention 15 février 2011
18 juil. 2008 à 15:26
Il te reste plus qu'a valider la confirmation de réponse :)

Cordialement Banban
3

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 20
Killion Messages postés 10 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 6 février 2009
18 juil. 2008 à 17:07
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
3
Réponse 6 / 20
banbanfr Messages postés 132 Date d'inscription dimanche 8 janvier 2006 Statut Membre Dernière intervention 15 février 2011
18 juil. 2008 à 17:12
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
3
Réponse 7 / 20
banbanfr Messages postés 132 Date d'inscription dimanche 8 janvier 2006 Statut Membre Dernière intervention 15 février 2011
18 juil. 2008 à 17:26
 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
3
Réponse 8 / 20
Killion Messages postés 10 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 6 février 2009
18 juil. 2008 à 19:30
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...
3
Réponse 9 / 20
banbanfr Messages postés 132 Date d'inscription dimanche 8 janvier 2006 Statut Membre Dernière intervention 15 février 2011
19 juil. 2008 à 13:54
Je suis un peu perdu peux tu me dire svp combien d'élément sont draggable et combien sont récepteur ?

Cordialement Banban
3
Réponse 10 / 20
Killion Messages postés 10 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 6 février 2009
19 juil. 2008 à 14:00
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é...
3
Réponse 11 / 20
banbanfr Messages postés 132 Date d'inscription dimanche 8 janvier 2006 Statut Membre Dernière intervention 15 février 2011
19 juil. 2008 à 14:13
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
3
Réponse 12 / 20
Killion Messages postés 10 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 6 février 2009
19 juil. 2008 à 14:43
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...
3
Réponse 13 / 20
banbanfr Messages postés 132 Date d'inscription dimanche 8 janvier 2006 Statut Membre Dernière intervention 15 février 2011
19 juil. 2008 à 15:02
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
3
Réponse 14 / 20
Killion Messages postés 10 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 6 février 2009
19 juil. 2008 à 15:08
nbr est bien egal a 3 mais dans la boucle c'est < et non <= donc on a bien que 3 boucles ><
3
Réponse 15 / 20
banbanfr Messages postés 132 Date d'inscription dimanche 8 janvier 2006 Statut Membre Dernière intervention 15 février 2011
19 juil. 2008 à 15:10
Je suis tjr dessus je cherche :)

Cordialement Banban
3
Réponse 16 / 20
banbanfr Messages postés 132 Date d'inscription dimanche 8 janvier 2006 Statut Membre Dernière intervention 15 février 2011
19 juil. 2008 à 16:34
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
3
Réponse 17 / 20
Killion Messages postés 10 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 6 février 2009
19 juil. 2008 à 16:56
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...
3
Réponse 18 / 20
banbanfr Messages postés 132 Date d'inscription dimanche 8 janvier 2006 Statut Membre Dernière intervention 15 février 2011
19 juil. 2008 à 17:00
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
3
Réponse 19 / 20
Killion Messages postés 10 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 6 février 2009
18 juil. 2008 à 17:16
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
0
Réponse 20 / 20
banbanfr Messages postés 132 Date d'inscription dimanche 8 janvier 2006 Statut Membre Dernière intervention 15 février 2011
19 juil. 2008 à 17:00
var mynode = document.getElementById('drag_id".$item['id']."');

par

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

Cordialement Banban
0

Discussions similaires

Drag and drop dans un tableau HTML
dedeisep2 -
bizibiz17 -

6 réponses
Drag Drop de fichiers
Popolino69 -
Frederyck -

3 réponses
drag and drop d'une image d'une page web lancée depuis un webbroswer
chrisledeveloppeur -
chrisledeveloppeur -

6 réponses
evenment clic + drag and drop sur une pictureBox
mimi2610 -
mimi2610 -

6 réponses
Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
Rejoignez-nous