Discussion :

[jinpol]

Bonjour,

je suis en train de faire une application qui utilise le Drag&Drop de JQuery.
Bon, je m'en sors plutot pas mal, mais je bloque sur un petit truc qui je suis sur n'est pas tres complique.

Je m'explique.
J'ai en fait deux zone qui peuvent recevoir des elements de differentes classes, dont une est en commun :

Code :

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

1
2
3
4
5
6
7
8
9
$(".columnarea").droppable({
		accept: ".colrowfields,.colfields",
...
}
 
$(".rowarea").droppable({
		accept: ".colrowfields,.rowfields",
...
}

Au depart, mes objets draggable, qui se trouve dans une autre zone, ont la classe "colrowfields" et peuvent donc etre dropper dans une des deux zones citees precedemment.
Si je droppe un de ces objets par exemple dans la zone ".columnarea", il faut que certains des objets draggable le reste, mais uniquement dans la zone ".columnarea". Donc pour faire ceci, je change la classe "colrowfields" en "colfields". Et donc, pas de soucis, ces elements ne peuvent pas etre dropper dans la zone ".rowarea".
Maintenant, ce que j'aimerai faire, c'est que quand l'utilisateur essaye de dropper un de ces elements dans cette zone ".rowarea", j'ai un message (style alert) qui le previenne que cette manipulation est impossible.

Or, je ne sais pas comment declencher cet evenement, etant donne que vu que mon element n'est plus accepter dans ma zone, le

Code :

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

1
2
3
4
drop: function(ev, ui)
{
...
}

ne se declenche pas.

Est-ce que j'ai ete assez clair ??? Et si oui, quelqu'un a t'il la solution ???

Je vous remercie par avance pour votre aide.
jinpol...

[danielhagnoul]

Bonsoir.

Comme le montre ce code, utilisé il y a quelque temps pour une demande du même genre, en utilisant toutes les options misent à disposition par le plugin on y arrive facilement :

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
 
$(document).ready(function(){
    var dropOK = false;
 
    $(".inventaire").draggable({
        cursor: "crosshair",
        revert: "invalid",
        snap: ".emplacement",
        snapMode: "both",
        snapTolerance: 40,
        stack: { group: '.inventaire', min: 50 },
        stop: function(event, ui) {
            alert("drag terminé, mais est-il bien placé : " + dropOK);
            dropOK = false;
        }
    });
 
    $(".emplacement").droppable({
        accept: ".inventaire",
        tolerance: "intersect",
        drop: function(event, ui) {
            alert("drop terminé !");
            dropOK = true;
        }
    });
});

Voir : http://jqueryui.com/demos/droppable/
et : http://jqueryui.com/demos/draggable/

[jinpol]

Bonjour

et tout d'abord merci pour votre reponse (la mienne arrive tardivement, mais j'etais en vacances )

Sinon en ce qui concerne le code que vous me donnez, en fait je ne vois pas trop comment ca peut m'aider.
Bon, je debute en JQuery, donc c'est peut etre moi qui me plante, mais vu que mon objet ne peut plus etre deplacer dans la zone "rowarea", je ne vois pas comment faire afficher une alerte qd j'essaye justement de deplacer cet objet dans cette zone. Vu que l'objet n'est plus accepte, je n'ai pas de moyen de declencher une alerte quand je lache mon objet dans cette zone. Et donc, je ne vois pas bien comment me servir de l'exemple que vous m'avez donne pour faire ce que je veux faire.

D'ailleurs, autre chose, j'ai teste le :

Code :

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

revert:'invalid',

et ca me fait le revert dans tous les cas, et je ne comprends pas pourquoi. En effet, ca ne devrait le faire que si je deplace un objet dans une zone dans laquelle il n'est pas accepte non ???

Merci encore pour votre reponse, et merci d'avance pour les suivantes

jinpol...

[danielhagnoul]

Bonsoir.

L'exemple que je vous ai transmis servait seulement à attitrer votre attention sur les nombreuses options qui existent pour droppable et draggable, et vous invitait à parcourir la documentation.

Pour votre cas, impossible d'en dire plus sans la totalité du code.