JavaScript/jQuery: Анимационное перемещение лития в списке?
У меня есть некоторый код, это в основном идентично UI jQuery Поддающийся сортировке пример здесь:
http://jqueryui.com/demos/sortable/#default
Это позволяет пользователям переупорядочивать элементы LI в УЛ. Я теперь столкнулся с ситуацией, тем не менее, где я хочу анимировать ЛИТИИ, меняющие положение... в основном, как будто пользователь перетащил их сам. Это оказывается намного более трудным, чем я ожидал, так как я не анимирую изменение, которое может быть выражено в CSS, таким образом, анимационный jQuery () не собирается помогать.
Я мог решить проблему путем выполнения некоторой математики и абсолютно расположения элементов списка, но это кажется совершенно ужасным. Существует ли изящный способ анимировать мои перемещающиеся элементы списка?
2 ответа
Я не уверен, поможет ли это вам, но я опубликовал сценарий для анимации объекта после того, как он был перетащен в этот ящик для вставки .
По сути, вы анимируете клон после отбрасывания элемента:
$("#droppable").droppable({
drop: function(e, ui) {
$(this).addClass('ui-state-highlight');
var x = ui.helper.clone();
x.appendTo('body')
// move clone to original drag point
.css({position: 'absolute',top: ui.draggable.position().top,left:ui.draggable.position().left})
.animate({
// animate clone to droppable target
top: $(this).position().top, left: $(this).position().left},
// animation time
1500,
// callback function - once animation is done
function(){
x.find('.caption').text("I'm being munched on!");
ui.draggable.addClass('fade');
// remove clone after 500ms
setTimeout(function(){ x.remove(); }, 500)
}
);
// remove the helper, so it doesn't animate backwards to the starting position (built into the draggable script)
ui.helper.remove();
}
});
Я бы создал вспомогательный div и анимировал его в нужное положение, затем переместил фактический li и уничтожил помощник.
Вы можете использовать $ ('# li'). Clone () , чтобы заполнить свой помощник, а затем полностью позиционировать помощник div , используя позицию из $ (' #li '). смещение () . Анимируйте помощника в новую позицию ( $ ('# target'). Offset () ), уничтожьте помощник ( .remove () ), а затем измените порядок вашего с.