jQuery UI Arrastrable, Ajustar a una cuadrícula

Question

Tengo dos contenedores. Un contenedor de miniaturas y un contenedor de "página". Ambos son divs. Las miniaturas se pueden arrastrar hacia adelante y hacia atrás entre los dos contenedores. He vuelto a las miniaturas configuradas como 'no válidas', por lo que vuelven a colocarse en uno de los dos contenedores si se caen fuera de cualquiera de ellos.

Las miniaturas deben ajustarse a una cuadrícula de 20x20 dentro del contenedor "página". Esto es para que el cliente pueda colocar las miniaturas en el contenedor de "página" en cualquier lugar, pero aún así poder alinearlas prolijamente.

El problema es que la opción 'grid' que se puede arrastrar no parece funcionar demasiado bien para esto. Parece que la "cuadrícula" está determinada por la ubicación de las arrastrables cuando comienzas a arrastrarla, en lugar de actuar como si la página tuviera una cuadrícula real a la que se pueda ajustar.

¿Hay alguna manera de arreglar esto para que la cuadrícula se base en el contenedor "página", en lugar de la posición del arrastrable cuando comienza a arrastrarlo?

Answer 1

Comprobar el ejemplo romperse en la interfaz de usuario del sitio Jquery:

http://jqueryui.com/demos/draggable/#snap-to

Usted puede tomar su mismo ejemplo y especificar tanto una rejilla y un parámetro de presión.

A continuación, el ajuste se basará en la esquina superior izquierda del selector de ajuste.

$("#draggable5").draggable({ snap: ".ui-widget-header", grid: [ 80, 80 ] }); 

El ejemplo en el sitio Jquery ahora permitirá que el cuadro "80x80" broche de presión basado en el recipiente grande.

En su situación podría ser más fácil de crear un div con anchura y la altura del 100%, a continuación, establecer el complemento: Selector (usando selectores CSS) para que div, a continuación, especificar una cuadrícula para ajustar a ...

Buena suerte

Answer 2

Tal vez podría intentar redondear la posición inicial a los 20 píxeles más cercanos utilizando el evento de inicio en el que se puede arrastrar.

Algo así (no probado ...):

$('#draggable').draggable(
    {snap : grid: [20,20]}, 
    {start : function(event, ui) { 
     var startPosition = $(ui.draggable).position(); 
     $(ui.draggable).css({ 
      'left' : (Math.round(startPosition.left/20)*20)+'px', 
      'top' : (Math.round(startPosition.top/20)*20)+'px'}); 
     } 
    } 
); 

yo estoy tratando de lograr eso, pero yo estoy clonando el elemento arrastrado a otro recipiente, de manera que es incluso más complicado ;-) Todavía tiene que averiguar cómo establecer la posición del ayudante en el evento de inicio ...

Por supuesto, solo funcionará si la posición de inicio ya es absoluta (como cuando se arrastra).

De hecho, casi lo he logrado aplicando este método al evento de detención y eliminando la propiedad de la cuadrícula.

Usted no recibe ninguna respuesta visual cuando se mueve el objeto alrededor porque no hay red de por sí ya, pero cuando se caiga, se va a su propia cuadrícula:

stop: function(event, ui) { 
    var stopPosition = $(ui.draggable).position(); 
    $(ui.draggable).css({'left' : (Math.round(stopPosition.left/20)*20)+'px', 'top' : (Math.round(stopPosition.top/20)*20)+'px'}); 
} 

Aquí está un ejemplo de trabajo: http://jsfiddle.net/qNaHE/3/