javascript - jQuery-UI 可排序 : Animate from original position to new after helper drop

Question

TLDR

我希望能够在 helper 被删除后通过显示原始项目移动到它的新位置而其他项目四处移动来为我的 jQuery-UI sortable 设置动画。由于某些需要固定位置的可排序对象，这变得很复杂。

项目:

该项目涉及在选项卡式界面中动态生成的 jQuery-UI portlet。选项卡和 portlet 内容本身是通过对已建立的 Web 服务的异步 AJAX 请求生成的。每个选项卡中都有数量不定的 portlet，并使用自定义滚动条显示内容。我已经使用类和在其他地方找到的关于堆栈溢出的解决方案(稍作修改)实现了对某些 portlet 的修复。当前功能的一个非常基本的实现可以在这里看到:http://jsfiddle.net/99yVq/ .

问题

在实现 portlet 修复之前，我在通过显示和隐藏占位符元素进行排序时制作动画:

$( ".content" ).sortable({       
    start: function(e, ui){
        $(ui.placeholder).hide(300);
    },
    change: function (e,ui){
        $(ui.placeholder).hide().show(300);
    }
});

可在此处查看实际操作:http://jsfiddle.net/BWNE2/ .这工作得很好，但我觉得动画不稳定，显然需要一些戳才能让它与上面的 portlet 修复解决方案一起工作(因为它依赖于帮助程序创建来确定固定位置)。这不是我正在寻找的解决方案。

更新

是否尝试将两者结合起来(需要注意的是没有一个是真正需要的)并且可以在此处获得组合功能:http://jsfiddle.net/BWNE2/1/ .动画有效，但如您所见，.fixed portlet 与其他 portlet 一起动画，然后恢复到其原始位置。

更新结束

问题

我的理想情况是用户将 portlet 助手(我认为它是拖动过程中使用的原始项目的克隆)从其原始位置拖动到新位置。在删除 portlet 时，它们会从旧位置到新位置进行动画处理。排序期间的当前移动应该保持以给最终用户反馈，但最终的动画应该在助手放下之后发生。

有没有人对如何实现这一目标有任何想法或示例？

如果我的问题格式不合适或者您需要更多信息，请告诉我。

提前致谢。

编辑

你可以在这里看到:http://jsfiddle.net/BWNE2/2/当将 portlet 固定在位置 3(顶部右上角)时，动画效果更加不足。它在排序时通常不在正确的位置，尽管它确实在排序结束时恢复到正确的位置。

Answer 1

按照找到的解决方案in other question ，这基本上是在拖动时克隆 itens 并将它们设置为新位置的动画，我将其合并到您的代码中。

这段代码没有的是释放后的动画，我通过保存 mouseup 事件上的位置，并将拖动的元素动画化到最终位置。

最后的 fiddle :http://jsfiddle.net/hTgad/

代码:

var lastPosition;

$( "#content" ).sortable({
    delay: 100,
    distance: 10,
    handle: '.portlet-header',
    items: '.portlet:not(.fixed)',
    start: function(e, ui)
    {
        //store the fixed itens position
        $('.fixed', this).each(function(){
            var $this = $(this);
            $this.data('pos', $this.index());
        });

        // Identify the item being dragged
        ui.helper.addClass("being-dragged");

        var clonedItems = $("#cloned_items");

        // Create a clone for every item, except the fixed ones and the one being dragged            
        $("#content .portlet:not(.being-dragged, .ui-sortable-placeholder, .fixed)").each(function(){
            // clone the original items to make their
            // absolute-positioned counterparts...
            var original = $(this);
            var clone = original.clone();
            // 'store' the clone for later use...
            original.data("clone", clone);
            original.css("visibility", "hidden"); // Hide the original

            // set the initial position of the clone
            var position = original.position();
            clone.css("left", position.left)
                 .css("top", position.top);

            // append the clone...
            clonedItems.append(clone);
        });
    },
    change: function(e,ui) 
    {
        //change the position of the fixed elements to the original one
        $sortable = $(this);
        $statics = $('.fixed', this).detach();
        $helper = $('<div class="portlet" style="background-color:#000"></div>').prependTo(this);
        $statics.each(function(){
            var $this = $(this);
            var target = $this.data('pos');
            $this.insertAfter($('.portlet', $sortable).eq(target));
        });
        $helper.remove();

        // animate all clones to the new position
        $("#content .portlet:not(.being-dragged, .ui-sortable-placeholder, .fixed)").each(function(){
            var item = $(this);
            var clone = item.data("clone");

            // stop current clone animations...
            clone.stop(true, false);

            var position = item.position(); // New position
            clone.animate({left: position.left, top:position.top}, 500);
        });

    },

    stop: function(e, ui){
        var el = $("#content .being-dragged");
        // Save the new position
        var newPosition = el.position();
        // Insert a placeholder for the final animation
        $('<div class="portlet ui-sortable-placeholder"></div>').insertBefore(el);
        el.css("left", lastPosition.left)
          .css("top", lastPosition.top)
          .css("position", "absolute")
          .animate({left: newPosition.left, top: newPosition.top}, 300, "swing", function() {
              // After the animation remove the placeholder and reset the element position
              $("#content .ui-sortable-placeholder").remove();
              $(this).css("left", "").css("top", "").css("position", "");
          })
          .removeClass("being-dragged");

        // Erase the temporary itens
        $("#cloned_items").empty();

        // make sure all our original items are visible again...
        $("#content .portlet").css("visibility", "visible");
    }

});

// Save the position of the element being dragged for the final animation
$(".portlet").on("mouseup", function() {
    lastPosition = $(this).position();
});