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>