jQuery Girl
  1. jQuery Girl
  3. Problèmes de performance de l’interface utilisateur jQuery avec une table dans IE
Intereting Posts
La modification de la méthode val () de jQuery ne semble pas changer le DOM Fondu des éléments par incréments lors du chargement de la fenêtre Comment jQuery peut-il utiliser une méthode de chaînage? jQuery colorbox: Comment changer la position de la colorbox JQuery Live vs On Obtenez “id” et ajoutez dans chaque div (name = “id”) jquery ajax charge certain div Insérer une image dans le dossier Afficher la valeur null dans le contrôleur Animation zoom papier Raphael Comment obtenir la chaîne d’un élément sans inclure l’élément frère de la chaîne? Passer des parameters au code Javascript sur une page en utilisant des modèles Django? Flot: Afficher des étiquettes de tick spécifiques Si des données existent dans la firebase database, le bouton Editer doit être affiché, sinon, Ajouter un bouton sans rechargement de page dans la fonction de réussite ajax jQuery .next () ne fonctionne pas? Toute autre alternative à la capture de texte en Ctrl + V

Problèmes de performance de l’interface utilisateur jQuery avec une table dans IE

J’ai du mal à faire en sorte que le code d’interface utilisateur fonctionne correctement dans IE.

J’ai un tableau – une masortingce de valeurs. Chaque cellule peut être vide ou contenir une liste d’éléments.

Je veux que les utilisateurs puissent faire glisser des éléments entre les cellules.

Donc, mon HTML ressemble à quelque chose comme ça: 

 
col 1col 2
 
row 1  
item A
 
item B
 		  
 
row 2   
item C
 
item D

Ensuite, j’utilise jQuery 1.3.1 et jQuery UI 1.6rc6: 

 $j('.draggable-item').each(function() { $j(this).draggable({ addClasses: false, revert: true, zIndex: 2000, cursor: 'move' }); }); $j('.droppable-cell').each(function() { $j(this).droppable({ addClasses: false, activeClass: 'droppable-cell-candrop', hoverClass: 'droppable-cell-hover', tolerance: 'pointer', drop: function(event, ui) { //function to save change }); }); });

Notez qu’il s’agit de code simplifié, tronqué et inachevé.

Mon problème est que dans FX, Safari, Chrome, etc. (c’est-à-dire tous les navigateurs corrects), cela fonctionne bien.

IE lutte vraiment bien. Avec une table 5×5, le retard d’IE sur le début d’un glissement est perceptible. Sur un tableau de 10 x 10 avec peut-être 100 éléments, le début du glissement bloque le navigateur.

Je souhaite pouvoir prendre en charge jusqu’à environ 20 cellules sur 15 et peut-être jusqu’à 500 articles – est-ce tout simplement impossible? Cela ne semble pas être le cas.

Est-ce que je fais quelque chose de mal? Y a-t-il un moyen de faire cela qui ne ralentit pas la page dans IE comme ça?

    Réduire la partie du DOM que jQuery doit rechercher peut être utile. Ajouter un identifiant à l’élément DOM contenant

    Modifiez ensuite votre sélecteur jQuery pour rechercher des éléments dans ce conteneur. 

     $j('#myTable .draggable-item').each(function() { ...

    C’est précisément pour cette raison que iGoogle et d’autres applications similaires utilisent une boîte transparente avec une ligne pointillée autour du bord. Internet Explorer ne parvient pas à faire glisser des objects complets en raison du problème que vous avez décrit ci-dessus.

    Cela pourrait être le rendu de la table … Pouvez-vous essayer sans la table?

    Si vos cellules ont la même taille, vous pouvez obtenir un affichage sous forme de tableau en les faisant flotter: 

      
     
    item A
     
    item B
     
     
     
     
     
    item C
     
    item D

    Si vous devez absolument utiliser un tableau, il peut être utile de définir le style de mise en page du tableau et de spécifier la taille des cellules.

    mon travail consiste à supprimer «activeClass» de la définition droppable et à n’utiliser que «hoverClass».

    Sur une table d’environ 150 lignes avec environ 10 colonnes. Il est passé de 10 secondes de décalage à moins de 1. Le glissement devient un peu saccadé, mais pas inutilisable.