Les plugins sélectionnables JQuery sont très lents

Contrairement à d'autres méthodes d'interface utilisateur JQuery, le sélecteur est appliqué même sur des éléments imbriqués. Pour sélectionner uniquement les ancêtres directs, utilisez:

jQuery('#content').selectable({
filter: '>*',
});

JQUERY UI SELECTABLE prend tous les éléments de la structure DOM, limiter le nombre d'éléments à ceux qui sont en haut. Ajouter un filtre: xxx

http: //forum.jquery.com/topic/major-performance-problems-phancectable

J'ai trouvé que JQuery.selectable est très lent dans les navigateurs plus âgés (comme IE7 et 8), car il doit appeler la méthode .Offset () sur chaque élément. Je l'utilisais sur les cellules dans une table, j'ai donc pu réduire le nombre d'appels .Offset () vers un pour chaque ligne et une pour chaque colonne (au lieu d'un appel pour chaque cellule) en faisant une version modifiée de le plugin avec une fonction de rafraîchissement modifié. Cela a rendu la performance acceptable pour les grandes tables. Le tableau des cellalités de cellalités contient la position horizontale de chaque colonne.

      this.refresh = function() {
            var cellPositions = [];
            var firstRow = true;
            selecteeRows = $("tr", self.element[0]);
            selecteeRows.each(function() {
                var row = $(this);
                // adding any filters here seems to slow down IE a lot
                // self.options.filter is not used!!
                var selecteeCells = $(row).find("td"); 
                if (firstRow && selecteeCells.length > 0) {
                    for (var i = 0; i < selecteeCells.length; i++) {
                        cellPositions[i] = $(selecteeCells[i]).offset().left;
                    }
                    cellPositions[selecteeCells.length] = cellPositions[selecteeCells.length - 1] + $(selecteeCells).outerWidth(true);
                    firstRow = false;
                }
                if (selecteeCells.length > 0) {
                    var top = $(selecteeCells).first().offset().top;
                    var bottom = top + $(selecteeCells).first().outerHeight();
                    var i = 0;
                    selecteeCells.each(function() {
                        var $this = $(this);
                        first = false;
                        $.data(this, "selectable-item", {
                            element: this,
                            $element: $this,
                            left: cellPositions[i],
                            top: top,
                            right: cellPositions[i + 1],
                            bottom: bottom,
                            startselected: false,
                            selected: $this.hasClass('ui-selected'),
                            selecting: $this.hasClass('ui-selecting'),
                            unselecting: $this.hasClass('ui-unselecting')
                        });
                        i++;
                    });
                }
            });

        };

Je sais que cela fait quelques années trop tard, mais j'essaie de me sentir sélectionnable sur une table 50x100.

J'ai constaté que si je crée la sélection sélectionnable sur le conteneur de table DIV (avec le filtre : 'TD' ) avant d'insérer le contenu de la table, il fonctionne super rapide. Dans Firefox, il était instanciant d'environ 1 ms (contre environ 100 lors de la création de contenu préexistant).