JQuery-UI перетаскивается в исходное положение.

Question

Это, вероятно, очень легко сделать, но я всегда считаю слишком сложным.

Я только что установил простой тест с #draggable/#droppable с фиксированной шириной/высотой + поплавок: влево.

Затем я хочу, чтобы кнопка сброса позволяла сбросить #draggable в исходное состояние после того, как она была привязана к #droppable. (внизу)

$(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

Перетаскиваемые предметы не отслеживают свое первоначальное положение, о котором я знаю; только во время перетаскивания и возврата. Вы можете просто сделать это самостоятельно, хотя:

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

Я использовал это на проекте

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

сделал трюк для меня

Answer 3

Я только что был большой успех в следующем:

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

Answer 4

Я использовал базовую идею h0dges. Шары, которые я создал, вернулись к исходным позициям, но я потерял стили, которые делали их в шары. Поэтому я сохранил стили шаров и просто сбросил их верхний и левый стили, чтобы вернуть их в исходное положение:

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