相关疑难解决方法(0)

我有一个类似于网格的列表,并且具有可计算的可排序功能.我想为除了被操纵的项目之外的每个项目设置动画,以便在列表中平滑滑动.我在这里设置了一个示例:http://jsfiddle.net/wpmte/.

<ul id="sort">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
</ul>

CSS:

ul {
    margin: 0;
    padding: 0;
}
li {
    display: inline-block;
    margin: 5px;
    padding: 5px;
    background: #0f0;
    width: 25%;
}
.ui-sortable-placeholder {
    height: 0 !important;
}

最后,JS:

$('#sort').sortable({ 

});

如何通过过渡而不是仅仅跳跃来为元素添加动画来填充空间？

TLDR

我希望能够通过显示原始项目移动到其新位置并且其他人移动来帮助我的jQuery-UI可以排序.某些可分类需要固定到位,这很复杂.

该项目:

该项目涉及在选项卡式界面中动态生成的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时,将从旧位置动画到新位置.应保持分拣过程中的当前运动以给最终用户反馈,但最终动画应在助手掉落后进行.

有没有人有任何想法或如何实现这一目的的例子？

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

提前致谢.

编辑

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