JQuery-UI przeciągalne reset do oryginalnego pos.?

Question

Jest to prawdopodobnie bardzo łatwe do zrobienia, ale zawsze uważam za zbyt skomplikowane.

Właśnie ustawiłem prosty test z #draggable/#droppable o stałej szerokości/wysokości + float: left.

Następnie chcę, aby przycisk resetowania mógł zresetować #draggable do jego oryginalnego stanu po tym, jak został przyciągnięty do #potpable. (dolna linia)

$(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() { 
    /* What do I put here to reset the #draggable to it's original position before the snap */ 
}); 

Answer 1

Elementy, które można przeciągnąć, nie śledzą ich pierwotnej pozycji, o której wiem; tylko podczas przeciągania i do ponownego przyciągnięcia. Można po prostu zrobić to na własną rękę, choć:

$("#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 2

użyłem tego w projekcie

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

wystarczyły mi

Answer 3

Właśnie miałem wielki sukces z następującymi:

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

Answer 4

Użyłem podstawowego pomysłu h0dges. Utworzone przeze mnie kulki powróciły na swoje pierwotne pozycje, ale straciłem style, które sprawiły, że stały się kulkami. Dlatego zachowałem style kulek i po prostu zresetowałem ich styl górny i lewy, aby przywrócić oryginalne pozycje:

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