Question

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

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

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

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

Answer 1

我会创建一个帮助器div并将其设置为位置，然后移动实际的li并销毁帮助器。

您可以使用$('#li').clone()填充助手，然后使用div中的位置绝对定位助手$('#li').offset()。将帮助程序设置为新位置（$('#target').offset()），销毁帮助程序（.remove()），然后重新排序<li>。

Answer 2

我不确定这是否对您有所帮助，但我在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();
  }
 });

Answer 3

您应该查看Quicksand，它允许您指定另一组<li>节点来替换当前节点，并且它将处理将现有列表转换为新节点所需的任何动画

图书馆希望您周围有另一个<ul>或<ol>（您将对用户隐藏）以表示新订单，但您可以自动创建临时列表这样做是为了使客户端代码可以为相同的节点提供新的订单。它确实需要以某种方式将节点与新节点交换，如果您的代码期望节点保持不变，这可能会导致复杂化。

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

3 个答案: