JQuery UI ziehbares Einschließungsfehler in IE

Question

Ich muss ein Raster von Zellen implementieren, in dem der Benutzer eine bestimmte Zelle per Drag & Drop auswählen können muss. Die Anzahl der Spalten und Zeilen ist vorgegeben (45 x 30 Zellen) und die Zelle muss quadratisch sein. Das Raster muss auch in einem responsiven Twitter Bootstrap-Layout platziert werden (flüssige Zeile).

Ich habe jQuery UI's draggable verwendet und eine Begrenzung festgelegt, die ein

innerhalb einer flüssigen Spanne ist:

            ... Seitenleiste

Das Problem ist, dass nur im IE (bisher nur Version 11 getestet) das draggable Element (das durch jQuery generiert wird und in der oberen linken Ecke beginnt und z.B. eine Größe von 2x2 Zellen hat) verschoben werden kann, aber wenn ich versuche, es zurück in die linke obere Ecke zu ziehen, wird etwas mit der Begrenzung durcheinander gebracht und ich kann es nicht mehr bis zum Rand der Begrenzung ziehen.

Ich habe ein JSFiddle eingerichtet, das das Problem zeigt: http://jsfiddle.net/e2yfC/307/.

Ich habe versucht, meinen zusätzlichen JavaScript-Code aufzuräumen, damit er leichter lesbar ist. Wie Sie sehen werden, tritt das Problem nur auf, wenn die flüssige Spanne, die das Raster enthält, eine prozentuale Breite hat (oder eine Breite wie 847,23px). Da die Bootstrap-Spalte (span9) flüssig sein muss, kann ich das Problem nicht lösen.

Ich habe auch versucht, mein Raster in einen weiteren div-Container zu packen, in dem ich eine Breite in Pixeln spezifiziere (Math.floor() auf Elternbreite (flüssige span9), aber ohne Erfolg.

Answer 1

Ich habe dein Fiddle ausprobiert und verstehe nicht, warum es sich so verhält.

Versuche, das margin: 0px auto; im #grid zu entfernen, dann konnte ich das Element wieder in die obere linke Ecke ziehen.

#grid {
  //margin: 0px auto; //entferne das
  position: relative;
  background: #ffcc00;
}