JavaScript/jQuery : Animate li movement within a list?

Question

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

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

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

我可以通过做一些数学运算并绝对定位列表元素来解决这个问题，但这看起来非常丑陋。有没有一种优雅的方法可以让我的列表元素四处移动？

Answer 1

我不确定这是否对您有帮助，但我发布了一些关于对象被拖入后动画化的脚本 this paste bin .

本质上，您在元素被删除后为克隆制作动画:

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