jQuery UI Draggable FireFox問題

Question

我想用jQuery UI製作一個可拖動的元素，並且除firefox外，一切正常。 - 元素只是以防萬一跳時，我試圖拖動或回覆：

$(".dragable").draggable({ 
 
    axis: "y", 
 
    revert: true 
 
});

.dragable { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: #000000; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div class="dragable"></div>

它完美，除了火狐所有其他瀏覽器。

Answer 1

的原因是margin: auto，一個解決方法是將包裹元素在div使其居中：

$(".dragable").draggable({ 
 
    axis: "y", 
 
    revert: true 
 
});

.center { 
 
    width: 50px; 
 
    height: 50px; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
} 
 

 
.dragable { 
 
    background: #000000; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div class="center"> 
 
    <div class="dragable"></div> 
 
</div>