jquery draggable перестает работать после установки divs на «position: static»

Question

В настоящее время у меня простая настройка div-боксов, которые я могу перемещать через функции jquery draggable. Теперь я столкнулся с проблемой, которую я просто не могу понять. Увлечение отлично работает, если я сначала загрузить страницу со следующей установкой:

html: 
<div id="box_1" class="card ui-widget-content"><p>Peter</p></div> 
<div id="box_2" class="card ui-widget-content"><p>Susan</p></div> 
... 

css: 
.card { 
    width: 200px; 
    height: 280px; 
    border: 1px solid blue; 
    padding: 10px; 
    margin: 15px; 
    box-sizing: border-box; 
    float: left; 
    position: static; 
} 

js: 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 

<script> 


$(document).ready(function(){ 

    $(".card").draggable(); 

    }); 
</script> 

Теперь я хотел бы добавить кнопку, которая «сбрасывает» дивы к исходной сетке:

$("#grid").click(function() 
    { 
     $('.card').css({position: 'static'}); 

    }); 

I подумал, что проще всего использовать «position:« static », поскольку это уже работает при открытии страницы. Теперь проблема заключается в том, что в то время как divs перенастраиваются на сетку так, как я их хочу, перетаскиваемая функциональность исчезает.

Я уже пытался «отключить» и «включить» перетаскивание на divs, но это не делает трюк.

Я как бы растерялся, почему функциональность просто прекращается.

Большое спасибо за вашу помощь: D

Answer 1

Для установки карты обратно в исходное положение просто установить left и top 0.

$(".card").draggable(); 


$("#grid").click(function() 
{ 
    //$('.card').css({position: 'initial'}); 
    $(".card").css({top:0,left:0}); 

}); 

http://jsfiddle.net/h2mwo7um/4/

редактировать Как уже замеченное @Paul, в draggable переопределения вызовов css карты, поэтому исходная настройка не имеет значения.

Answer 2

JQuery UI использует left и top свойства для позиционирования элемента. Свойства не могут использоваться со статическим положением. Вы можете использовать relative, absolute, или fixed, если хотите, но не static.

Я думаю, что это достигнет желаемого эффекта.

$(document).ready(function() { 
    $(".card").draggable(); 
    $("#grid").click(function() { 
     $('.card').draggable("destroy").draggable(); 
    }); 
});