jQuery UI Перетаскиваемая анимация при привязке к сетке

Question

jQuery UI Draggable предлагает опцию grid, которая, когда установлена, привязывает ваш перетаскиваемый элемент к сетке. Единственная проблема, с которой я столкнулся, это то, что я все еще хочу, чтобы это оживило перед щелчком.

Если моя сетка равна [500,500], пользователь не получит обратной связи, пока мышь не преодолеет расстояние в 500 пикселей.

Возможно ли сделать подобное "привязка к сетке", но одновременно анимировать?

Answer 1

Полагаю, вы имеете в виду, что хотите привязаться к сетке после того, как пользователь завершил перетаскивание. В этом случае вы можете использовать событие stop Draggable и рассчитать смещение элемента.

Предположим, у вас есть перетаскиваемый элемент в родительском элементе, начиная со смещения (0, 0), который является верхним левым углом. Затем вы применяете обычный перетаскиваемый эффект к элементу, и на stop вы рассчитываете его положение и привязываете его к ближайшей «ячейке».

Код для этого будет выглядеть примерно так:

$(el).draggable({
  stop: function(e, ui) {
    var elem = ui.helper,
        left = elem.position().left,
        top  = elem.position().top;

    elem.css({
      left: left - (left%10),
      top: top - (top%10)
    });
  }
});

Этот код всегда будет привязываться в зависимости от координаты верхнего левого пикселя элемента и основывается на абсолютном позиционировании элемента и нестатическом позиционировании родителя (относительном, абсолютном и т. Д.)

** Редактировать **

Я создал быстрое демо - http://jsfiddle.net/LQwMe/1/