jquery 将 div 设置为 "position: static" 后，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>

现在我想添加一个按钮 "resets" div 到原始网格：

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

    });

我认为只使用 "position: 'static'" 会最简单，因为这在打开页面时已经有效。现在的问题是，虽然 div 按照我希望的方式重新调整到网格，但可拖动功能消失了。

我已经尝试 'disable' 和 'enable' 可以在 div 上拖动，但没有成功。

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

非常感谢您的帮助:D

Answer 1

jQuery UI 使用 left 和 top 属性来定位元素。这些属性不适用于静态位置。如果需要，您可以使用 relative、absolute 或 fixed，但不能使用 static.

我想这样会达到预期的效果。

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

Answer 2

要将卡片放回原来的位置，只需将 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，这就是初始设置无关紧要的原因.

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

jquery draggable stops working after setting divs to "position: static"

javascript

css

jquery

jquery-ui

draggable