jQuery UI Draggable FireFox Problem

Question

Ich versuche, ein ziehbares Element mit jQuery UI zu machen und alles funktioniert gut außer Firefox. - Element nur springt nahe, wenn ich versuche, es zu ziehen oder wieder her:

$(".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>

Es funktioniert perfekt in allen anderen Browsern außer FireFox.

Answer 1

der Grund war die margin: auto, ist ein Problem zu umgehen, das Element in einem div wickeln Sie es zum Zentrum:

$(".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>