jQuery draggable + droppable: comment casser l'élément tombé à l'élément tombé

j'ai mon écran divisé en deux DIV s. Dans la gauche DIV j'ai quelques 50x50 pixel DIV s, dans la droite DIV j'ai une grille vide faite de 80x80 LI s. Les DIV s sur la gauche sont égouttables, et une fois lâchés sur un LI , ils devraient basculer au centre de ce LI .

semble simple, non? Je ne sais pas comment obtenir ce fait. J'ai essayé en manipulant la chute de DIV 's Les propriétés CSS top et left correspondent à celles du LI , mais les propriétés left et top sont relatives à la gauche DIV .

Comment est-ce que je peux faire pour que l'élément tombe au centre de l'élément dans lequel il est tombé? Ça doit être simple, non?

Edit: j'utilise jQuery UI 1.7.2 avec jQuery 1.3.2.

Edit 2: qui d'autre a ce problème, c'est comment j'ai corrigé:

J'ai utilisé la solution de Keith d'enlever l'élément traîné et de le placer à l'intérieur de l'élément laissé tomber dans le drop callback du plugin droppable: 

function gallerySnap(droppedOn, droppedElement)
{
    $(droppedOn).html('<div class="drop_styles">'+$(droppedElement).html()+'</div>' );
    $(droppedElement).remove();
}

Je ne suis pas l'élément abandonné pour être draggable à nouveau, mais si vous le faites, liez simplement draggable à nouveau.

pour moi cette méthode a également résolu le problème I avait lors de la position des éléments tombés (qui serait relative à la gauche DIV ) et défiler à l'intérieur de la deuxième DIV . (Les éléments resteraient fixes sur la page, maintenant ils défilent le long).

j'ai joué avec les options snap pour le faire paraître bien tout en glissant, donc merci à karim79 pour cette suggestion.

Je ne gagnerai probablement aucun prix de code impressionnant avec cela, donc si vous voyez de la place pour l'amélioration, s'il vous plaît partager!

28
demandé sur 10goto10 2009-08-10 16:45:50

7 réponses

j'ai eu un problème similaire - j'ai travaillé autour d'elle en supprimant manuellement l'élément traîné de sa vieille mère et de l'ajouter à l'tombé sur l'élément.

16
répondu Keith 2009-08-10 12:55:07

J'ai trouvé que la méthode de Keith marchait pour moi. Comme sa réponse n'inclut pas un exemple d'implémentation, je posterai la mienne: 

$('.dropTarget').droppable({
    drop: function(ev, ui) {
        var dropped = ui.draggable;
        var droppedOn = $(this);
        $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
    }
});

ou, un peu plus concise: 

$('.dropTarget').droppable({
    drop: function(ev, ui) {
        $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
    }
});
71
répondu Barry Pitman 2013-04-04 07:32:19

Merci pour votre post - il m'a aidé dans la bonne direction. Je trouve que c'est un peu plus propre de définir les propriétés de position de l'objet draggable au lieu de jouer avec le code HTML. Cela positionne la position dans le coin supérieur gauche de l'objet droppable , mais vous pouvez modifier pour qu'elle soit aussi centrée. 

drop: function(event, ui) {
   $(ui.draggable).css('top', $(this).position().top);
   $(ui.draggable).css('left', $(this).position().left);
}
10
répondu glackk 2012-12-26 19:48:50

j'ai trouvé que quand vous faites la drag, jQuery UI ajoute un inline pour vous dire où vous l'avez fait tomber. Voici un exemple du code que j'ai utilisé pour le mettre en place 

$('.droppable').droppable({ drop: function(ev, ui) { 
    //Get Details of dragged and dropped
    var draggedclass = ui.draggable.attr('class'),
        droppedclass = 'class' + $(this).attr('name').toLowerCase();

    //update the classes so that it looks od.       
    ui.draggable.removeClass(draggedclass).addClass(droppedclass);  
    ui.draggable.removeAttr('style');
});
3
répondu AutomatedTester 2012-12-26 19:58:11 
$("form li").draggable({snap:'.ui-droppable', snapMode:'inner', revert:true});
$('.drop').droppable({drop:function(ev, ui)
                           {$(ui.draggable).appendTo($(this))
                                           .css({position:'static', left:'0px', top:'0px'})
                                           .draggable('option', 'disabled', false)
                                           .css({position:'relative'});
                           }
                     }
                    );
3
répondu diyism 2012-12-27 06:36:42

si les div s sur la gauche sont en fait dans les li s sur la droite (que vous pouvez confirmer avec Firebug), et si les li s sont tous dans un ul (comme ils devraient être), essayer un ou les deux suivants: 

ul#right_div {
  text-align: center;
}

ul#right_div li {
  text-align: center;
}
0
répondu Anthony 2012-12-26 19:48:32

basé sur le code de Barry, que se passe-t-il si nous aimons ajouter une option avec un bouton "x" l'élément à détacher à nouveau du nouveau parent et à rattacher à l'initiale?

je pensais que sth comme ça, mais ça ne marchait pas.. pour faire une sorte de variable qui tiennent l'état initial 

var flag;
$('.draggable-div').draggable({
    revert: 'invalid',
    stop: function(){
        $(this).draggable('option','revert','invalid');
        $(this).find('.undo').show();
    flag=$(this).parent();
    }
});


$('.draggable-div').find('.undo').click(function(i, e) {
    var $div = $(this).parent();
$($div).detach().appendTo(flag);
 }

sth est certainement erroné, mais je ne sais pas si vous pouvez obtenir le concept... juste être en mesure d'inverser ce que vous avez chuté à leur initiale état.

0
répondu nikolas 2013-04-04 14:58:25