traduccion - jquery draggable sortable

Obtener jQuery arrastrable para ajustarse a una grilla específica

Question

( NOTA: Algunos han hecho preguntas similares, pero fueron demasiado específicos y no dieron respuestas utilizables )

El widget que se puede arrastrar de jQuery UI tiene opciones para ajustar a una grilla, pero no hay forma de establecer en qué se relaciona la grilla.

Por ejemplo, tenemos una grilla 20x20 claramente definida en nuestro objetivo de caída. Un elemento de arrastre que comienza en 0,0 dentro del objetivo de caída se ajustará en correspondencia con la cuadrícula. Pero un elemento de arrastre que se inicia en una ubicación diferente, o fuera del objetivo de colocación, no se alineará con esa cuadrícula.

http://jsfiddle.net/FNhFX/5/

HTML:

<div class="drop-target">
    <div class="drag-item">Drag me</div>
    <div class="drag-item" style="left:87px;top:87px;">Drag me</div>
</div>
<div class="outside-drag-item">Drag me</div>

JS:

$(function() {
    $(".drag-item").draggable({
        grid: [20, 20]
    });
    $(".outside-drag-item").draggable({
        grid: [20, 20],
        helper:"clone"
    });
    $(".drop-target").droppable({
        accept: ".drag-item"
    });
});

¿Hay alguna forma de ajustar a una cuadrícula específica usando jQuery que se puede arrastrar?

Answer 1

Como alternativa a intentar usar la opción de cuadrícula en la interfaz de usuario de jQuery, he creado mi propia grilla (que puede hacer visible o invisible usando css), luego uso la opción de ajustar y especificar la clase de cada una de mis líneas de cuadrícula.

Para su jsfiddle original, agregué el siguiente css:

.gridlines {
display: none;
position:absolute;
background-color:#ccc;
}

y el siguiente javascript:

function createGrid(size) {
  var i,
  sel = $(''.drop-target''),
      height = sel.height(),
      width = sel.width(),
      ratioW = Math.floor(width / size),
      ratioH = Math.floor(height / size);

  for (i = 0; i <= ratioW; i++) { // vertical grid lines
    $(''<div />'').css({
        ''top'': 0,
        ''left'': i * size,
        ''width'': 1,
        ''height'': height
    })
      .addClass(''gridlines'')
      .appendTo(sel);
  }

  for (i = 0; i <= ratioH; i++) { // horizontal grid lines
    $(''<div />'').css({
        ''top'': i * size,
        ''left'': 0,
        ''width'': width,
        ''height'': 1
    })
      .addClass(''gridlines'')
      .appendTo(sel);
    }

  $(''.gridlines'').show();
}

createGrid(20);

Aquí está el jsFiddle ( http://jsfiddle.net/madstop/46sqd/2/ )

Answer 2

Voy a seguir adelante y publicar una respuesta aquí también, aunque vine aquí a través de una pregunta de seguimiento que me hiciste .

Puede crear su propia funcionalidad de ajuste a la red muy fácilmente dentro del evento de drag en una interfaz de usuario jQuery que se puede arrastrar.

Básicamente, desea comprobar qué tan cerca está la posición actual de la interfaz de usuario en cualquier punto en que el elemento arrastrable se esté arrastrando a una cuadrícula. Esa proximidad siempre se puede representar como el resto de la posición dividida por la cuadrícula. Si ese resto es menor o igual que snapTolerance, entonces simplemente establece la posición a la que sería sin ese resto.

Eso fue raro de decir en prosa. En el código, debería ser más claro:

Demo en vivo

// Custom grid
$(''#box-3'').draggable({
    drag: function( event, ui ) {
        var snapTolerance = $(this).draggable(''option'', ''snapTolerance'');
        var topRemainder = ui.position.top % 20;
        var leftRemainder = ui.position.left % 20;

        if (topRemainder <= snapTolerance) {
            ui.position.top = ui.position.top - topRemainder;
        }

        if (leftRemainder <= snapTolerance) {
            ui.position.left = ui.position.left - leftRemainder;
        }
    }  
});