将div设置为“位置：静态”后jquery draggable停止工作

Question

我目前有一个简单的 div 框设置，我可以在 jquery 可拖动功能中移动。我现在遇到了一个我无法弄清楚的问题。 如果我最初使用以下设置加载页面，则拖动效果非常好：

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>

现在我想添加一个按钮，将 div “重置”到原始网格：

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

    });

我认为只使用“位置：'静态'”是最简单的，因为这在打开页面时已经有效。现在这里的问题是，虽然 div 按照我想要的方式重新调整到网格，但可拖动的功能已经消失了。

我已经尝试在 div 上“禁用”和“启用”可拖动，但它不起作用。

我有点困惑为什么功能会停止。

非常感谢您的帮助：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/

edit 正如@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();
    }); 
});