L'obtention de jQuery déplaçable d'accrochage spécifique de la grille

(REMARQUE: Certains ont posé des questions similaires, mais ont été trop spécifique et n'a donné aucun utilisable réponses)

jQuery UI est déplaçable widget a des options pour l'accrochage à la grille, mais pas moyen de définir ce que la grille est relatif.

Par exemple, nous avons clairement défini, 20x20 grille dans notre cible de dépôt. Un faites glisser l'élément qui commence à 0,0 à l'intérieur de la cible de dépôt va casser en correspondance avec la grille. Mais un faites glisser l'élément qui commence à un endroit différent, ou à l'extérieur de la cible, ne s'alignent pas avec cette grille.

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"
    });
});

Est-il tout façon à se caler sur un quadrillage à l'aide de jQuery déplaçable?

Je pense que u besoin de mettre helper:"d'origine" pour l'extérieur-le glisser l'élément, bcaz option cloner cloner pour faire glisser et originale séjour même endroit.
qui ne fait pas de différence: jsfiddle.net/FNhFX/7
U sera élaborée plus à propos de "glisser-moi" div comportement, je pensais à l'extérieur, on n'est pas déplaçant à l'intérieur de la grille.

OriginalL'auteur Yarin | 2013-12-20

18

Je vais aller de l'avant et de poster une réponse ici, aussi, si je suis venu ici par un suivi de la question vous a demandé.

Vous pouvez créer votre propre snap-to-grid fonctionnalités très facilement à l'intérieur de la drag événement sur un jQuery UI déplaçable.

Fondamentalement, vous voulez vérifier comment fermer l'interface utilisateur actuelle est la position à n'importe quel point que le déplaçables à la souris est déplacée sur une grille. Cette proximité peut toujours être représenté comme le reste de la position divisé par la grille. Si cette dernière est inférieure ou égale à la snapTolerance, ensuite il suffit de régler la position de ce qu'il serait sans qui reste.

Qui était bizarre à dire en prose. Dans le code, il devrait être plus clair:

Démonstration En Direct
```
//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;
        }
    }  
});
```
Nate à la rescousse - résolu mon problème avec l'un de génial solution. Merci encore!
Spot sur ... fonctionne un régal - remplacer les % 20 % gridWidth & % gridHeight.

OriginalL'auteur

Comme une alternative de tenter de l'utiliser grille option dans l'INTERFACE utilisateur de jQuery, j'ai créé ma propre grille (que vous pouvez rendre visible ou invisible à l'aide de css), puis utilisez le composant logiciel enfichable option et spécifiez la classe de chacune de mes lignes de la grille.

D'origine jsfiddle, j'ai ajouté le code css suivant:

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

et le code javascript suivant:

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);

Voici le jsFiddle (http://jsfiddle.net/madstop/46sqd/2/)

OriginalL'auteur

Vous devez vous connecter pour publier un commentaire.