JavaScript/jQuery:在列表中动画li运动？

Question

我有一些代码与jQuery UI Sortable示例基本相同:

http://jqueryui.com/demos/sortable/#default

这允许用户在UL内重新排序LI元素.不过,我现在遇到了一种情况,我想让LI更改位置的动画......基本上就像用户自己拖动它们一样.事实证明这比我预期的困难得多,因为我没有动画可以在CSS中表达的变化,所以jQuery的animate()不会有帮助.

我可以通过做一些数学并绝对定位列表元素来解决问题,但这看起来很难看.是否有一种优雅的方式来动画我的列表元素移动？

Answer 1

我不确定这是否对您有帮助，但我发布了一些关于在将对象拖入此粘贴箱后对对象进行动画处理的脚本。

本质上，您在元素被删除后为克隆设置动画：

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