JQuery-UI draggable réinitialiser à la position d'origine

Question

Ceci est probablement très facile à faire, mais j'ai toujours tendance à penser trop compliqué.

Je viens de mettre en place un simple test avec #draggable / #droppable avec une largeur/hauteur fixe + float:left.

Je veux ensuite un bouton de réinitialisation pour pouvoir réinitialiser le #draggable à son état initial après avoir été snapsé à un #droppable. (dernière ligne)

$(document).ready(function() {

    $("#draggable").draggable
    ({  
        revert: 'invalid',
        snap: '#droppable',
        snapMode: 'corner',
        snapTolerance: '22'

    });
});

    $("#droppable").droppable
    ({
        accept: '#draggable', 
        drop: function(event, ui) 
        {
            $(this).find("#draggable").html();
        }
});

    $(".reset").click(function() {
    /* Que dois-je mettre ici pour réinitialiser le #draggable à sa position d'origine avant le snap */
});

Answer 1

J'ai utilisé ceci sur un projet

$("#reset").click(function () {
    $(".draggable-item").animate({
        top: "0px",
        left: "0px"
    });
});

a fonctionné pour moi

Answer 2

Les éléments glissables ne conservent pas leur position d'origine, que je sache ; seulement pendant le glissement et pour être ramenés à leur position d'origine. Vous pouvez le faire vous-même :

$("#draggable").data({
    'originalLeft': $("#draggable").css('left'),
    'origionalTop': $("#draggable").css('top')
});

$(".reset").click(function() {
    $("#draggable").css({
        'left': $("#draggable").data('originalLeft'),
        'top': $("#draggable").data('origionalTop')
    });
});

http://jsfiddle.net/ExplosionPIlls/wSLJC/

Answer 3

Je viens juste d'avoir un grand succès avec le suivant :

$(".draggable-item").removeAttr("style");

Answer 4

J'ai trouvé que la méthode suivante était la plus simple pour réinitialiser la position d'origine, mais si vous voulez que l'élément reste draggable cela ne fonctionnera pas seul

$(".draggable-item").removeAttr('style');

Cela a fonctionné pour moi pour réinitialiser la position d'origine et garder l'élément draggable:

$("#reset").click(function () {
    // Réinitialiser la position
    $(".draggable-item").removeAttr('style');

    // Détruire le draggable original et en créer un nouveau
    $(".draggable-item").draggable("destroy");
    $(".draggable-item").draggable();
});

Answer 5

J'ai utilisé l'idée de base de h0dges. Les balles que j'ai créées sont revenues à leurs positions d'origine, mais j'ai perdu les styles qui les transformaient en balles. Par conséquent, j'ai conservé les styles des balles et j'ai simplement réinitialisé leurs styles top et left pour les ramener à leurs positions d'origine :

function endRound() {
   $(".ball").css({"top":"", "left":""});
}