Для получения полного доступа
зарегистрируйтесь.
Сниппет,  JavaScript

Быстрая, плавная сортировки вертикальных элементов


Smoothsort.gifGitHub / Демо

Плавная сортировка вертикальных элементов.

Главной задачей было добиться максимальной быстрой скорости сортировки и отрисовки, без лишних действий. Данный плагин предназначен для узкого списка задач, по этому на супер функциональность в нём можете не рассчитывать.

Так же есть AssetBundle для Yii2 SmoothSortAsset

Инициализация

bower install smooth-sort
<script src="../jquery.min.js"></script>
<script src="../src/jquery.smooth-sort.js"></script>

Атрибут data-sort необходим для начальной сортировки. Он может быть изменён по пользовательский, указав иной в настройках плагина. Параметр "attrSort".

<ul>
    <li data-sort="3">Тест 3</li>
    <li data-sort="5">Тест 5</li>
    <li data-sort="2">Тест 2</li>
    <li data-sort="1">Тест 1</li>
    <li data-sort="6">Тест 6</li>
    <li data-sort="4">Тест 4</li>
</ul>

Определяем настройки плагина

var ul = $('ul');

ul.smoothSort({itemSelector: 'li'});

Добавление элемента

Добавление с дальнейшей пересортировкой

$('.add').click(function () {
    var sort = Math.floor(Math.random() * (99 - 1 + 1)) + 1;
    ul.smoothSort('add', $("<li data-sort='" + sort + "'>Тест " + sort + "</li>"));
    ul.smoothSort('sort');
});

Изменение параметра сортировки

Изменение параметров сортировки на конкретном элементе с последующей пересортировкой

$('.edit').click(function () {
    var li = $('li[data-sort=1]');
    var sort = Math.floor(Math.random() * (7 - 1 + 1)) + 1;
    li.text('Test 1 - ' + sort);
    ul.smoothSort('setSort', {el: li, sort: sort});
    ul.smoothSort('sort');
});

Удаление элемента

Удаление определённого элемента с дальнейшей пересортировкой

$('.remove').click(function () {
    var li = $('li[data-sort=3]');
    ul.smoothSort('remove', li);
    ul.smoothSort('sort');
});

Код

(function ($) {
    'use strict';
    function SmoothSort(el, options) {
        var that = this,
            defaults = {
                itemSelector: 'li',
                itemHeight: 'auto',
                itemHeightStatic: true,
                animate: 250,
                attrSort: 'data-sort',
                revert: false
            };
        that.element = el;
        that.el = $(el);
        that.items = [];
        that.height = 0;
        that.eventSort = false;
        that.options = $.extend({}, defaults, options);
        that.initialize();
    }

    $.SmoothSort = SmoothSort;

    SmoothSort.prototype = {

        initialize: function () {
            var that = this,
                options = that.options;
            that.el.css({
                position: 'relative',
                'overflow-y': 'hidden',
                outline: 'none',
                transition: 'height ' + options.animate + 'ms ease-out'
            });
            that.setHeight(that.setItems(that.el.find(options.itemSelector)));
            that.el.height(that.height);
            that.sort();
        },

        setSort: function (data) {
            var that = this,
                el = data.el,
                sort = data.sort;
            $.each(that.items, function (i, item) {
                if (item.el[0] === el[0] && item.sort != sort) {
                    item.sort = Math.floor(sort);
                    that.eventSort = true;
                }
            });
        },

        remove: function (el) {
            var that = this;
            if (typeof el !== "undefined") {
                var index = undefined;
                $.each(that.items, function (i, item) {
                    if (item.el[0] === el[0]) {
                        index = i;
                    }
                });
                if (typeof index !== "undefined") {
                    that.setHeight([that.items[index]], true);
                    that.items[index].el.remove();
                    that.items.splice(index, 1);
                    that.eventSort = true;
                    that.el.height(that.height);
                }
            } else {
                that.height = 0;
                that.eventSort = true;
                $.each(that.items, function (i, item) {
                    item.el.remove();
                });
                that.items = [];
                that.el.height(that.height);
            }
        },

        setItems: function (items) {
            var that = this,
                options = that.options,
                push = [];
            items.each(function (i, el) {
                var item = {
                    sort: Math.floor($(el).attr(options.attrSort)),
                    height: options.itemHeightStatic ? $(el).height() : null,
                    el: $(el).css({
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        visibility: 'visible',
                        transition: 'transform ' + options.animate + 'ms ease-out, opacity ' + options.animate + 'ms ease-out',
                        opacity: 1
                    })
                };
                that.items.push(item);
                push.push(item);
                that.eventSort = true;
            });
            return push;
        },

        add: function (items) {
            var that = this,
                options = that.options,
                $items = $(items);
            that.el.append($items);
            that.setHeight(that.setItems($items.filter(options.itemSelector)));
            that.el.height(that.height);
        },

        sort: function () {
            var that = this,
                options = that.options;
            if (that.eventSort) {
                if (options.revert) {
                    that.items.sort(function (a, b) {
                        if (a.sort > b.sort) return -1;
                        if (a.sort < b.sort) return 1;
                    });
                } else {
                    that.items.sort(function (a, b) {
                        if (a.sort > b.sort) return 1;
                        if (a.sort < b.sort) return -1;
                    });
                }
                var height = 0;
                if (options.itemHeight === 'auto') {
                    if (options.itemHeightStatic) {
                        $.each(that.items, function (i, item) {
                            that.transform(item.el, height);
                            height += item.height;
                        });
                    } else {
                        $.each(that.items, function (i, item) {
                            that.transform(item.el, height);
                            height += item.el.height();
                        });
                    }
                } else {
                    $.each(that.items, function (i, item) {
                        that.transform(item.el, height);
                        height += options.itemHeight;
                    });
                }
                that.eventSort = false;
            }
        },

        setHeight: function (items, remove) {
            var that = this,
                options = that.options,
                height = 0;
            if (options.itemHeight === 'auto') {
                if (options.itemHeightStatic) {
                    $.each(items, function (i, item) {
                        height += item.height;
                    });
                } else {
                    $.each(items, function (i, item) {
                        height += item.el.height();
                    });
                }
            } else {
                height = options.itemHeight * items.length
            }
            if (typeof remove !== "undefined" && remove) {
                that.height -= height;
            } else {
                that.height += height;
            }
        },

        transform:function(element, height){
            element.css('transform', 'translate3d(0px, ' + height + 'px, 0px) scale3d(1, 1, 1)');
        }
    };

    $.fn.smoothSort = function (options, args) {
        var dataKey = 'smoothSort';
        if (arguments.length === 0) {
            return this.first().data(dataKey);
        }
        return this.each(function () {
            var inputElement = $(this),
                instance = inputElement.data(dataKey);

            if (typeof options === 'string') {
                if (instance && typeof instance[options] === 'function') {
                    instance[options](args);
                }
            } else {
                instance = new SmoothSort(this, options);
                inputElement.data(dataKey, instance);
            }
        });
    };
})(jQuery);
  jquery JavaScript yii2 php sort плагин jquery

Автор


Gravatar image
jumper423
  • Репутация: 58
  • Сниппеты : 9
  • Ревизии : 2
Подписаться

Чтобы увидеть комментарии, нужно быть участником сообщества

Регистрация