9

我有一个类似网格的列表，并且可以按计划在其中工作的可排序功能。我想为每个项目设置动画，除了被操纵以在列表中平滑滑动的项目。我在这里设置了一个示例：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({ 

});

如何为元素设置动画以通过过渡而不是跳跃来填充空间？

4

2 回答 2

2

我是这样做的：

// needed to allow for multiple placeholders as they animate
var placeholderNumber = 0;

$('#new-ct-banner-tree').sortable({
    // basic setup
    distance: 15,
    placeholder: 'tree-drop-placeholder',
    items: ".tree-item:not(.new-ct-tree-group-item, .group-add-button)",
    connectWith: ".connectedSortable",
    handle: ".top-drag-handle",
    helper: "clone",
    opacity: 0.75,
    revert: 300,
    scrollSpeed: 4,
    cursor: "move",

    start: function(event, ui) {
        // When starting the drag, add our replacement placeholder. We set the height of the default placeholder to 30px (see css below), so the replacement needs to be that same height and the original gets a negative margin of that height and our replacement consumes the original.
        $(ui.placeholder).before('<div class="temp-spacer-' + placeholderNumber +     '"></div>').css('margin-top', '-30px');
        $('.temp-spacer-' + placeholderNumber).css('height', '30px');
    },
    change: function(e, ui) {
        // When placeholder changes, animage away old one, and animate in new one, but only if a little delay has passed to avoid crazy jank town.
        if ($(ui.item).parent().hasClass('delayPlaceholderMovement') == false) {
            // If the parent doesn't have the 'delay' class, proceed to animating away the current placeholder.
            $('.temp-spacer-' + placeholderNumber).animate({
                height: "0px"
            }, 200, function() {
                $(this).remove();
            });
            // iterate the placeholder number to keep old and new ones separated.
            placeholderNumber = placeholderNumber + 1;

            // add and animate in the new location placeholder.
            $(ui.placeholder).before('<div style="height:0px;" class="temp-spacer-' + placeholderNumber + '"></div>');
            $('.temp-spacer-' + placeholderNumber).animate({
                height: "30px"
            }, 200);
        };
        // add the 'delay' class to the parent
        $(ui.item).parent().addClass('delayPlaceholderMovement');
        // and set a timeout to remove the parent after 40ms
        window.setTimeout(function() {
            $(ui.item).parent().removeClass('delayPlaceholderMovement');
        }, 40);
    },
    stop: function(event, ui) {
        // remove our fake placeholder and strip the regular placeholders negative margin.
        $('.temp-spacer-' + placeholderNumber).css('height', 0).remove();
        $(ui.placeholder).css('margin-top', '0px');
        // clear placeholder number so this doesn't go a bagillions after performing a few dragg events.
        placeholderNumber = 0;
    }
});


// CSS:
// Setting the height of the default placeholder. If you want to style the placeholder, you'd probably set an additional class on our replacement animated placeholder.
.tree-drop-placeholder {
    height: 30px;
    width: 100%;
}

因此默认占位符被删除并在 jquery UI 中非常突然地添加，它只是从一个地方获取它，将它添加到新的地方，而无法添加 css 动画或任何东西。

我们在这里所做的是将默认占位符替换为我们可以设置动画的我们自己的占位符。我们为每个创建的替换占位符迭代一个唯一的数字，以便我们可以同时拥有多个现有的并且更渐进地为它们设置动画。

希望这可以帮助！尚未在许多浏览器中对其进行测试，并且可能有比全局范围更好的放置“placeholderNumber”变量的地方。

于 2014-06-24T17:03:09.410 回答
-4

$('#sort').sortable({ revert: true });

我想这会变魔术！！！

于 2014-12-31T12:00:04.670 回答