JQuery Dragbar: Ist es möglich, nach dem Loslassen der Maus am Raster einzurasten?

Question

Im Grunde möchte ich die Rasteroption verwenden, um ein ziehbares DIV an ein 30 x 30 Raster zu heften, aber ich möchte das Ziehen dennoch reibungslos halten. Gibt es also eine Möglichkeit, nach dem Loslassen der Maus (oder ähnlichem) am Raster zu haften?

Answer 1

Korrektur an @Zed Hier wird das Zentrum verwendet, um zu entscheiden, in welches Raster es platziert werden soll. Welches auch immer den größten Teil des draggable belegt, ist dasjenige, in das es geht.

stop: function(e, ui) {
    var grid_x = 30;
    var grid_y = 30;
    var elem = $( this );
    var left = parseInt(elem.css('left'));
    var top = parseInt(elem.css('top'));
    var cx = (left % grid_x);
    var cy = (top % grid_y);

    var new_left = (Math.abs(cx)+0.5*grid_x >= grid_x) ? (left - cx + (left/Math.abs(left))*grid_x) : (left - cx);
    var new_top = (Math.abs(cy)+0.5*grid_y >= grid_y) ? (top - cy + (top/Math.abs(top))*grid_y) : (top - cy);

    ui.helper.stop(true).animate({
        left: new_left,
        top: new_top,
        opacity: 1,
    }, 200);
},

Answer 2

Wenn das alles ist, was Sie mit dem Raster machen möchten, könnten Sie es nachahmen:

$("#myobj").draggable({
  ...
  stop: function(event, ui) {
    t = parseInt($(this).css(top);
    l = parseInt($(this).css(left);
    $(this).css(top , t - t % 30);
    $(this).css(left, l - l % 30);
  }
  ...
});

Answer 3

Probieren Sie die Transition aus!

Ein nettes kleines Etwas, das ich gerade entdeckt habe, ist, dass wenn Sie dem gezogenen Element die CSS-Eigenschaft transition geben, es sich auf die Geschwindigkeit auswirken wird, mit der es am Raster ausgerichtet wird.

$(function() {
  $(".draggable").draggable({
    containment: 'window',
    grid: [30, 30]
  });
});

.draggable {
  background: #333;
  color: whitesmoke;
  font-family: 'sans-serif', 'arial';
  padding: 5px 12px;
  display: inline-block;
  transition: top 0.05s ease-in-out, left 0.05s ease-in-out
}

Zieh mich!