Javascript jquery draggable在将divs设置为“0”后停止工作；位置：静态“；

目前，我有一个简单的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>

我认为只使用“position:‘static’”是最简单的，因为在打开页面时它已经起作用了。现在的问题是，当div按照我希望的方式重新调整到网格时，可拖动的功能就消失了

我已经尝试在div上“禁用”和“启用”draggable，但它没有起作用

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

---

非常感谢您的帮助：D

jqueryui使用

left

和

top

属性来定位元素。这些属性不能用于静态位置。如果需要，可以使用

相对的

、

绝对的

、或

固定的

，但不能使用

静态的

我认为这会达到预期的效果

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

---

要将卡设置回原始位置，只需将

left

和

top

设置为0即可

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


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

});

---

edit正如@Paul已经注意到的那样，

draggable

调用覆盖了卡片的css，这就是为什么初始设置不重要。

检查。但是为什么在我最初加载页面时它会起作用？div现在已经被定义为静态的，不是吗？对“.draggable（）”的调用为元素指定了样式“position:relative”。哦，好的。谢谢你提供的信息。你能不能也提出一个解决方案，如何“重置”电网。如果你有答案？我用一个片段编辑了我的答案，该片段可以在不永久删除可拖动功能的情况下将卡重置为其原始位置。不幸的是，代码对我不起作用。。。感谢您提供有关draggable如何分配position元素的信息（；

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


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

});