Elementos seleccionables centrados con el margen: 0 auto ajusta a la izquierda mientras ordena

Question

Tengo un Jquery UI clasificable donde las casillas ordenables se centran en su contenedor usando margin: 0 auto.

Utilizo la configuración axis: 'y' en el ordenable para que las cajas solo puedan moverse verticalmente.

Si bien la clasificación, la caja arrastrado se mueve a la izquierda del contenedor

Usando arrastrable con axis: y no causa este problema, parece estar relacionada con que se pueden ordenar de widgets.

He replicado el error en este jsfiddle. ¿Algunas ideas?

Answer 1

El problema es que jQuery UI aplica position:absolute al arrastrar - Causando que el elemento se ubique en top:0, left:0 del elemento más cercano posicionado, o la ventana.

Una opción para solucionar este problema es usar un ayudante posicionado personalizado para arrastrar con el helper option. Usted puede hacer uso del método position() utilidad jQuery UI para posicionar fácilmente el ayudante en relación con el elemento original de la siguiente manera:

$('#container').sortable({ 
 
    axis: 'y', 
 
    helper: function(event, elm) { 
 
    return $(elm).clone().position({ 
 
     my: "left", 
 
     at: "left", 
 
     of: elm 
 
    }); 
 
    } 
 
});

* { /*for stack snippet demo*/ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#container { 
 
    width: 200px; 
 
    text-align: center; 
 
    height: 300px; 
 
    border: 1px solid green; 
 
    position: relative; 
 
} 
 
.draggable { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: yellow; 
 
    margin: 10px auto; 
 
    cursor: move; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<div id="container"> 
 
    <div class="draggable"></div> 
 
    <div class="draggable"></div> 
 
</div>