JQuery Draggable: возможно ли привязка к сетке после отпускания мыши? - PullRequest
Новая
       8

JQuery Draggable: возможно ли привязка к сетке после отпускания мыши?

4 голосов
/ 31 июля 2009

По сути, я хочу использовать опцию сетки, чтобы привязать перетаскиваемый div к сетке 30 x 30, но я хочу, чтобы перетаскивание было плавным. Так есть ли способ, которым я могу привязаться к сетке при отпускании мыши (или что-то подобное)

Ответы [ 3 ]

5 голосов
/ 19 июня 2011

поправка к @Zed это будет использовать центр для определения того, в какую сетку его поместить. В какую большую часть перетаскиваемого объекта будет входить. 

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);
},
3 голосов
/ 01 августа 2009

Если это все, что вы хотите сделать с сеткой, вы можете эмулировать ее: 

$("#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);
  }
  ...
});
0 голосов
/ 12 января 2016

Попробуйте перейти!

Хорошая небольшая вещь, которую я только что обнаружил, заключается в том, что если вы дадите перетаскиваемому элементу свойство css перехода, это повлияет на скорость, с которой он привязывается к сетке. 

$(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
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div class="draggable">Drag Me!</div>
...