jQuery-UI-performance-Probleme mit einer Tabelle im IE

Bin ich immer Probleme auftreten UI-code ausführen soll, überhaupt gut im IE.

Ich habe eine Tabelle - eine matrix von Werten. Jede Zelle kann leer sein, oder Sie halten eine Liste von Elementen.

Ich möchten, dass Benutzer in der Lage, ziehen Sie die Elemente zwischen den Zellen.

Also mein HTML sieht ungefähr so aus:

<table>
    <tr><td></td><th scope="col">col 1</th><th scope="col">col 2</th></tr>
    <tr><th scope="row">row 1</th>
        <td class="droppable-cell">
            <div class="draggable-item">item A</div>
            <div class="draggable-item">item B</div>
        </td>
        <td class="droppable-cell"></td>
    </tr>
    <tr><th scope="row">row 2</th>
        <td class="droppable-cell"></td>
        <td class="droppable-cell">
            <div class="draggable-item">item C</div>
            <div class="draggable-item">item D</div>
        </td>
    </tr>
</table>

Dann bin ich mit jQuery 1.3.1 und 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
        });
    });
});

Beachten Sie, dass dies ist, vereinfacht, gekürzt und unfertigen code.

Mein problem ist, dass in FX, Safari, Chrome, etc (also alle anständigen Browser) einwandfrei.

IE wirklich kämpfen obwohl. Mit einer 5x5-Tabelle, DH die Verzögerung am Anfang ein ziehen bemerkbar. Auf einer 10x10-Tabelle mit vielleicht 100 Elemente, die den start des drag-hängt der browser.

Will ich auch können zur Unterstützung von bis zu Runde 20x15 Zellen und vielleicht bis zu 500 Artikel - ist das einfach nur unmöglich? Es scheint nicht, wie es sein sollte.

Mache ich etwas falsch? Gibt es eine Möglichkeit, dies zu tun, der nicht langsam die Seite im IE so?

ich bin auch mit genau diesem problem. großen Tisch, verschachtelte divs innerhalb der Tabelle. firefox rendert die Seite innerhalb von 10 Sekunden, der ie rendert die Tabelle nach einer Wartezeit von 2 Minuten. firefox noch Reißverschlüssen zusammen mit teh ziehen und dtop, dh krabbelt.. infact, es friert, und die drag-and-drop sdoes nicht funktionieren. werde versuchen, einige der folgenden Lösungen. die Feste Breite, und die #id tagname.class Referenzen. Aber ich fürchte, dass es immer noch langsam sein. wenn jemand anderes hat einige gute i deas, ich wäre ganz Ohr.
Yeah - meine Lösung war, zu begrenzen, DH der Benutzer - Sie können nur wählen Sie eine winzige Teilmenge der Zeilen und Spalten, FX und Chrome-Nutzer können. Selbst dann IE8 nur meistert, vielleicht mit 25 Zellen (5x5-raster), 7 und 6 bleiben hoffnungslos. Es bringt Erinnerungen zurück, der Ende der 90er Jahre die web-Entwicklung und ist eine hässliche Sache zu tun, aber was können Sie tun, wenn Ihr browser so schlecht?
Mit demselben Problem, der IE ist super langsam mit großen raster, aber Chrome und Firefox sind in Ordnung.

InformationsquelleAutor Keith | 2009-02-24

3

Verengung der Anteil des DOM, dass jQuery hat zu suchen kann helfen. Hinzufügen einer id zu der mit DOM-element
```
<table id="myTable">
```
Dann ändern Sie Ihre jQuery-Selektor zu finden Elemente innerhalb dieses Containers
```
$j('#myTable .draggable-item').each(function() { ...
```
- Ich dachte, das war $('#myTable,.draggable-Element') gemäß der Dokumentation.
- NÖ, ich war auf 'Vorfahr, Nachkomme' Selektoren (docs.jquery.com/Selectors/descendant#ancestordescendant). Ein Komma wäre ein " n " Schalter (docs.jquery.com/Selectors/multiple#selector1selector2selectorN) was ist nützlich in einigen Fällen, aber nicht in diesem
- Das hilft ein wenig, obwohl Sie immer noch vernichtend langsam im IE
- etwas enttäuschenden improovement. das Hauptproblem scheint zu sein, ie ist sehr sehr sehr langsam Rendern. Ich sah es flog einer von den cpu ' s auf 100% zu machen eine Tabelle mit 56 Spalten und 34 Zeilen 7 und eine halbe Minute. ziehen und ablegen dauerte gut 30 Sekunden zu starten und zu stoppen. es gibt nur 80 ungerade divisons zu ziehen, um zwischen den Zellen.
InformationsquelleAutor Jaysen Marais
2

Genau dieses Problem ist der Grund, warum iGoogle und anderen simliar apps verwenden einer transparenten box mit einer gestrichelten Linie um den Rand. Der IE ist nicht in der Lage zu ziehen voller Objekte, weil das Problem, das Sie oben skizziert habe.
- Meinst du google.com/ig ? Auch im IE, dass die Seite, zieht das den eigentlichen Inhalt. Ich bin nur versuchen, ziehen kleine divs.
InformationsquelleAutor Nick Berardi
2

Könnte es in der Tabelle Rendern... Können Sie versuchen, ohne den Tisch?

Wenn Ihre Zellen die gleiche Größe, die Sie erreichen können, die Tisch-display schwebenden Ihnen:
```
<style>
.droppable-cell{
  float:left; width: 50%; height: 20px; border: 1px solid black;
}
</style>

<div class="droppable-cell">
        <div class="draggable-item">item A</div>
        <div class="draggable-item">item B</div>
</div>
<div class="droppable-cell"></div>
<div class="droppable-cell"></div>
<div class="droppable-cell">
        <div class="draggable-item">item C</div>
        <div class="draggable-item">item D</div>
</div>
```
Wenn die Verwendung einer Tabelle ist, muss die Einstellung der table-layout Stil "fest", und die Angabe der Zellen, die Größe kann helfen.
- Danke, nette Idee - aber das ist wirklich tabellarische Daten. Der Zeile-und Spalte-überschriften sind hierarchisch, mit umfasst. Ich glaube nicht, dass ich konnte dann die Größe der Zelle.
InformationsquelleAutor Serxipc
1

meiner Arbeit um ist fallen die "activeClass" aus dem abwerfbaren definition, und nur mit 'hoverClass'.

Auf einem Tisch von etwa 150 Zeilen mit 10 Spalten. Es ging von 10 Sekunden lag, auf weniger als 1. Das ziehen wird ein wenig Ruckeln, aber nicht unbrauchbar.

InformationsquelleAutor brick

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.