Rubberband für eigenen Gebrauch

[Moribundus]

Hallo Zusammen,

in einem anderen Beitrag in diesem Forum bin ich auf ein Rubberbandlösungaufmerksam geworden.

und dachte mir das ist für meine Drag und Drop-boxen genau das richtige...

Bei diesem kleinen Projekt bräuchte ich daher ein wenig Hilfe da ich das Rubberband gerne als Selektor für mehrer DIV-Boxen verwenden möchte.

als erstes wollte ich an dieser Stelle:

var orginal = document.getElementById('bild');
das Rubberband auf meine Tabelle begrenzen indem ich es in
var orginal = document.getElementsByClassName('planningtable');
ändere, aber da scheitert es schon.

ändere ich es nicht ist das Rubberband auf meine gesamten Website aktiv und die Javakonsole gibt mir folgende Fehlermeldung

TypeError: o is null
[Bei diesem Fehler anhalten]

top += parseInt(o.offsetTop);

wäre mir jemand bei diesen Projekt behilflich?

Danke im Vorraus!

[Siri]

Hallo,

das Rubberband auf meine Tabelle begrenzen indem ich es in
var orginal = document.getElementsByClassName('planningtable');
ändere, aber da scheitert es schon.

Erstmal muss der Browser getElementsByClassName unterstützen und zweitens: Elements! D.h. du bekommst einen Array mit allen Elementen zurück, die diesen Klassennamen haben und nicht ein einzelnes Element wie bei getElementById!
getElementsByClassName('planningtable')[0] würde die erste Tabelle nehmen, die diesen Klassennamen hat.

Siehe http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=auchff.

Viele Grüße
Siri

[1UnitedPower]

Erstmal muss der Browser getElementsByClassName unterstützen

Das dürfte kein Problem sein. Wenn man den IE8 noch unterstützen möchte kann man auch document.querySelector/All als Fallback benutzen.

und zweitens: Elements! D.h. du bekommst einen Array mit allen Elementen zurück

Nein ein array-ähnliches Objekt, nämlich eine NodeList.

[Der Martin]

Hallo,

Erstmal muss der Browser getElementsByClassName unterstützen
Das dürfte kein Problem sein. Wenn man den IE8 noch unterstützen möchte ...

und das möchte man bestimmt, da er der letzte (im Sinne von "neueste") IE ist, der unter Windows XP noch installierbar ist. Und Windows XP ist noch zahlreich.

Ciao,
 Martin

[1UnitedPower]

und das möchte man bestimmt, da er der letzte (im Sinne von "neueste") IE ist, der unter Windows XP noch installierbar ist. Und Windows XP ist noch zahlreich.

Hab ein shim gebastelt. Getestet mit IE10 im IE8 Browser- und Dokumentmodus.

Mal nebenbei, weiß einer warum folgendes im IE8 so ist?

  
typeof document.querySelectorAll === 'object';  
typeof function(){} === 'function';  

[Moribundus]

Erstmal muss der Browser getElementsByClassName unterstützen und zweitens: Elements!

funktioniert, da ich auch andere Funktionen so aufgebaut habe...

D.h. du bekommst einen Array mit allen Elementen zurück, die diesen Klassennamen haben und nicht ein einzelnes Element wie bei getElementById!

das funktioniert nur wenn ich wie im Beispiel ein Image als Bereich wähle, bei einen table-tag leider nicht

getElementsByClassName('planningtable')[0] würde die erste Tabelle nehmen, die diesen Klassennamen hat.

funktioniert ebenfalls im table-tag nicht...

wenn ich getElementsByClassName('planningtable')[0] benutze, funtkioniert es dann nur in dem table-tag und in allen Kind-Elementen, denn das will ich erreichen...

[misterunknown]

Moin,

getElementsByClassName('planningtable')[0] würde die erste Tabelle nehmen, die diesen Klassennamen hat.

Sinnvoller wäre es meiner Meinung nach, sofern es nicht mehrere planningtables gibt, selbiges als ID für die Tabelle zu nehmen.

funktioniert ebenfalls im table-tag nicht...
wenn ich getElementsByClassName('planningtable')[0] benutze, funtkioniert es dann nur in dem table-tag und in allen Kind-Elementen, denn das will ich erreichen...

Das wäre zu testen. Hast du ein Online-Beipspiel?

Grüße Marco

[Moribundus]

Sinnvoller wäre es meiner Meinung nach, sofern es nicht mehrere planningtables gibt, selbiges als ID für die Tabelle zu nehmen.

stimmt, nein gibt nur die eine.

aber dann funktioniert das Rubberband ebenfalls garnicht

funktioniert ebenfalls im table-tag nicht...
wenn ich getElementsByClassName('planningtable')[0] benutze, funtkioniert es dann nur in dem table-tag und in allen Kind-Elementen, denn das will ich erreichen...

Das wäre zu testen. Hast du ein Online-Beipspiel?

nein ein Onlinebeispiel habe ich hier leider nicht, ich skripte hier nur im lokalen Netz ohne Internetanbindung
aber mit getElementsByClassName('planningtable')[0] funktioniert das Rubberband ebenfalls nicht und getElementById scheint mir doch die sauberere Lösung...

[misterunknown]

Moin,

var orginal = document.getElementById('bild');
das Rubberband auf meine Tabelle begrenzen indem ich es in
var orginal = document.getElementsByClassName('planningtable');
ändere, aber da scheitert es schon.

Ich habe mal ein Beispiel konstruiert, indem zumindest der Rubber eingeschränkt werden kann (auf das Element). Allerdings ist es momentan nur ein Div. Ich bau mal noch etwas mit einer Tabelle.

Grüße Marco

[Moribundus]

Allerdings ist es momentan nur ein Div. Ich bau mal noch etwas mit einer Tabelle.

Grüße Marco

Vielen Dank erstmal, musst du aber nicht, das funktioniert mit einer Tabelle auch ganz gut obwohl dein Beispiel nicht stark vom Orginal abweicht.

Kann man dem Eventlistener irgendwie sagen das er das Rubberband nicht feuern soll wenn ein drag Vorgang gestartet wird?

[misterunknown]

Moin,

Kann man dem Eventlistener irgendwie sagen das er das Rubberband nicht feuern soll wenn ein drag Vorgang gestartet wird?

Standardmäßig nicht. Da müsstest du an den Quelltext des Rubberbandes ran.
Vielleicht kann man das aber auch mit preventDefault() verhindern, wenn man auf verschiebbaren Elementen die entsprechende Funktion zuordnet.

Grüße Marco