javascript - jquery draggable 在将 div 设置为 "position: static"后停止工作

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'});

    });

我认为只使用“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/

编辑 正如@Paul 已经注意到的，draggable 调用会覆盖卡片的 css，这就是初始设置无关紧要的原因。