web-dev-qa-db-fra.com

jQuery droppable accepter

Quelqu'un peut-il me dire comment je peux écrire une fonction dans une condition d'acceptation et comment découvre-t-il ce qu'il faut accepter et ce qu'il ne faut pas accepter? Par exemple, je souhaite accepter div a et div b dans une condition d'acceptation. Comment puis-je écrire à travers une fonction?

javascriptjquerydroppable
21
Nishima

Si vous souhaitez que la liste de dépôt accepte une sélection d’éléments, procédez comme suit:

$(".droppable").droppable({
    accept: function(d) { 
        if(d.hasClass("foo")||(d.attr("id")=="bar")){ 
            return true;
        }
    }
});

Cet objet acceptera des éléments avec la classe "foo" ou un élément avec l'id "bar"

47
Alex

Si je comprends bien votre question, vous souhaitez accepter conditionnellement l'élément supprimé en fonction du code personnalisé. La réponse d'Aberon est le cas typique: vous voulez autoriser que seules certaines options déplaçables soient supprimées en fonction de leur classe, et que toutes les autres reviendront. Si cela répond à votre question, alors d'accord.

Cependant, il est judicieux que l'animation inversée soit conditionnellement basée sur quelque chose de plus complexe qu'une correspondance de classe. Dans mon propre projet, j'utilise un glisser-déposer pour ajouter des utilisateurs à un groupe. Si l'utilisateur supprimé est déjà dans le groupe, je souhaite que l'élément utilisateur soit rétabli. Sinon, je vais de l'avant avec une action AJAX pour les insérer. Ce n'est pas un substitut à la vérification finale, mais c'est un bon retour visuel.

J'ai cherché ailleurs une réponse simple à cette question. Remarque pour les responsables JQuery: pour moi, le moyen le plus simple consiste à ajouter une propriété à l'objet event dans la fonction de suppression, comme ceci:

$('.target').droppable({
    accept: '.valid'
    drop: function(event, ui) {
        if(isDropOK() == true) {
            // add child here
        } else {
            event.revert = true;
        }
    }
});

Malheureusement, ça ne marche pas. Cependant, voici ce qui fonctionne "bien": définissez l'élément déplaçable pour toujours revenir, puis masquez l'aide si la condition est remplie. Vous pouvez obtenir une référence à l'aide en recherchant le seul élément de la page ayant la classe ".ui-draggable-dragging". Voici un exemple, remplacez "isDropOK ()" par votre propre logique:

$('.valid').draggable({
    revert: true,
    helper: 'clone',
    opacity: 0.5
});

$('.target').droppable({
    accept: '.valid'
    drop: function(event, ui) {
        if(isDropOK() == true) {
            $('.ui-draggable-dragging').hide();
            // add child here
        }
    }
});

Donc, pour récapituler, chaque élément reviendra toujours à moins que vous ne participiez à l'événement drop et que vous masquiez manuellement l'assistant. L'animation de retour aura toujours lieu, mais vos utilisateurs ne la verront pas. C'est un peu bidouillé, mais le résultat final semble fonctionner correctement.

13
Barnabas Kendall

Selon la documentation Jquery sur les sélecteurs .

Tous les objets glissables qui correspondent au sélecteur Seront acceptés. Si une fonction est spécifiée , Elle sera appelée Pour chaque objet glissable sur la page (passé En tant que premier argument de la fonction ), Pour fournir un filtre personnalisé. La fonction doit retourner à true si le pouvant être glissé doit être accepté.

Ainsi, 

$('.selector').droppable({ accept: '.special' });

dans leur exemple, ils agiront uniquement comme si quelque chose avait été supprimé s'ils avaient la classe 'spéciale'. Il semble pouvoir accepter n'importe quel sélecteur Jquery .

8
Sean Vieira

En plus de Alex répondre qui est la meilleure réponse que j’ai trouvée sur cette question, j’aime ajouter que si vous voulez vérifier les attributs correspondants entre droppable et draggable, vous pouvez utiliser le mot-clé this pour accéder à la liste de contrôle dans votre fonction accept. Voici un petit exemple que j'ai récemment utilisé:

accept : function (draggable) {
  var id_group_drop, id_group_drag;

  //get the "id_group" stored in a data-attribute of the draggable
  id_group_drag = $(draggable).attr("data-id-group");

  //get the "id_group" stored in a data-attribute of the droppable
  id_group_drop = $(this).parent().attr("data-id-group");

  //compare the id_groups, return true if they match or false otherwise
  return id_group_drop == id_group_drag;
}

Donc, la draggable est uniquement acceptée, quand c'est id_group (rappelez-vous, juste un exemple) correspond au id_group de la droppable, sinon la draggable serait annulée. Je pense que cela pourrait être un cas d'utilisation très courant, peut-être que cela aidera quelqu'un.

4
morten.c

J'ai trouvé une solution qui fonctionne à la condition qu'aucun objet déplaçable ne soit placé dans un objet déjà occupé par un autre élément déplaçable:

$(".placement").droppable({
    accept: function(Elm) {
        // only allow draggables to the placement if there's no other draggable 
        // in the droppable
        if (!$(this).attr('isbusy'))
            return true;
    },
    drop: function(event, ui) {
        $(this).attr('isbusy', 'yeap'); // fill key with something

        var draggable = $(ui.draggable[0]);
        // free the draggable's previous droppable 
        if (draggable.attr('droppable')) {
            $('#' + draggable.attr('droppable')).attr('isbusy', '');
        }

        // save the new draggable's droppable
        draggable.attr('droppable', $(this).attr('id'));
    },
});
3
elhoyos

C'est la solution que j'utilise:

... accept: '#diva,#divb', ...
3
Erik

Au lieu d'utiliser une classe comme accept, vous pouvez simplement utiliser une fonction telle que Et renvoyer true si elle correspond à vos critères

$('#mydroppable').droppable(
{
    accept: function() { return true; },
    drop: function () { alert("Dropped!"); }
});
1
Ashik

Ceci est ma solution:

var foo = true;

$( ".draggable" ).draggable({ 
                        revert: function(){if(foo == true){return true;}else{foo = true;}},
                         });

    $("#droppable").droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function( event, ui ) {
            if($this == $that){
                foo = true;
                alert("this will revert the draggable back to original position");
            }else{
                foo = false;
                alert("this will NOT revert the draggable back to original position");
            }
        }
    });
0
Tim Joyce