[jQuery] Mangelhafte API ?

#basTi · 15. November 2011

Hallo zusammen,

Beschäftige mich erst seit kurzen mit jQuery und komme oft gar nicht zurecht, weil ich
einfach nicht weiss welche Optionen ich habe und in der API auch nix find.

Aktuelles Beispiel:

Ich habe ein draggable Element, welches ich gern während des drags manipulieren würde.
Die API hilft mir soweit, dass ich weiß, dass beim Drag folgendes Event relevant ist:

Code:

$( ".selector" ).draggable({
   drag: function(event, ui) { ... }
});

Link zur API

Woher weiß ich nun, was für Attribute die übergabeparameter (Event / UI) haben, welche man an die Funktion übergeben bekommt?
Nach längerer Suche bin ich dann auf der Demo (!) Seite von draggable gelandet, wo zumindest ein paar mehr Infos sind Link.

Ich such mir nen Wolf um bestimmte Sachen zu finden oder bin ich einfach zu verwöhnt von der JAVA API? Aber es kann doch auch net sein das sowas net dokumentiert ist.
Ich weiß genau was ich machen will, kann es aber programmatisch nicht umsetzen, weil ich einfach ewig suchen muss ... Das frustriert total und hab fast scho keine Lust mehr auf jQ/JS.

Bin euch für jede Hilfe dankbar.

carom · 15. November 2011

Was meinst du mit API? Redest du nicht eher von der Dokumentation?

Ciraxis · 15. November 2011

jquery != jquery ui und sonst steht doch alles da?oO weiß nicht was du genau suchst.
unter events sehe ich welche events gefeuert werden und wie ich es aufrufe

#basTi · 15. November 2011

Ich habe erst auf der demoseite gefunden, dass zB UI folgende Attribute hat:

ui.helper - the jQuery object representing the helper that's being dragged
ui.position - current position of the helper as { top, left } object, relative to the offset element
ui.offset - current absolute position of the helper as { top, left } object, relative to page

Wieso steht das nicht in der API?
Und tschuldigung, dass ich jQ mit jQ UI gleichgesetzt hab :/

Suchu · 15. November 2011

Wieso steht das nicht in der API?

im API (-> http://en.wikipedia.org/wiki/Application_programming_interface)
wird das wohl kaum stehen...

API != Dokumentation

es steht sogar auf der Webseite: "API Reference"

just my 2 cents

cx01 · 15. November 2011

`basTi schrieb:
ui.helper - the jQuery object representing the helper that's being dragged
ui.position - current position of the helper as { top, left } object, relative to the offset element
ui.offset - current absolute position of the helper as { top, left } object, relative to page

Wieso steht das nicht in der API?
Und tschuldigung, dass ich jQ mit jQ UI gleichgesetzt hab :/

Es steht doch aber auf der Seite, die du zuerst gepostet hast, direkt am Ende des ersten Abschnitts: http://docs.jquery.com/UI/Draggable

#basTi · 16. November 2011

Oh stimmt :/ ... Steht wirklich da oben. Ich bin's gewohnt, die Infos an der stelle zu finden wo sie auftauchen (per link zB).

Hier ein willkürliches Beispiel aus der Java API:Link
Hier sieht man, dass ich auch direkt für die Übergabeparameter alle Infos schnell bekomme, da deren Klasse direkt verlinkt ist.

@Suchu: doch genau das soll in der API stehen.

Naja dann muss ich mich damit abfinden, dass das hier wohl net so gut strukturiert ist wie bei Java ...

Jetzt noch mal zu meinem Anfangsproblem, dass ich leider noch net gelöst hab:
Ich möchte ein DIV in eine Richtung draggen können innerhalb seines parents (dies geht ja einfach über die draggable Parameter). Nun soll aber abhängig davon wie weit gedragt wurde verschiedenes passieren:
Wird nur soweit gedragt, dass das Ende des Parents nicht erreicht wird, dann soll das DIV an seine ursprungsposition zurück (auch leicht mit revert).
Nun soll aber das DIV am Ende bleiben, falls es bis dahin gedragt wurde.

Mein Ansatz ist: in der Drag Funktion Abfragen wie weit gedragt wurde und falls das Ende erreicht ist, revert auf false setzen. Funktioniert aber nicht so wie ich's mir Wünsche, denn wenn ich zB sehr schnell drage, bleibt das DIV vor dem Ende stehen (was mir eh ein rätsel Ist, da ich ja auf die Position prüfe). Nun wollte ich in diesem fall die Position noch manuell setzten - bekomms aber net hin.

Zu guter Letzt müsste ich noch die Drag Funktion ersetzen innerhalb der stop Funktion. Würdest das mit diesem Code aus der API gehn :

Code:

$( ".selector" ).bind( "dragstop", function(event, ui) {
  ...
});

?

Also ersetzt dann diese Funktion die zuvor definierte?

cx01 · 16. November 2011

Also ich würde es so machen:
- In der "start" Methode speichert du die Position, die das Objekt zu Beginn des Draggens hat
- in der "stop" Methode schaust du, ob das Objekt nun ausserhalb des Parents liegt. Falls nein, setzt du seine Position zurück auf die vorher gespeicherte.

Und deine Idee, innerhalb der stop Funktion den Drag-Handler zu ersetzen, wird so nicht funktionieren. Du würdest damit lediglich einen weiteren Event-Handler hinzufügen.

#basTi · 16. November 2011

Danke schonmal für den Vorschlag.
Die Position muss ich nicht speichern, da ich nur zwei Startzustände habe:
[.....o] Element rechts im parent
[o.....] Element links im parent
Wird nun das Element nicht komplett bis zum Rand gedragt soll es zurückspringen.

Hier mal mein Code:

Code:

$('.switch').draggable({
	axis: "x",
	containment: 'parent',
	revert: true,
	"revertDuration": 50,
	distance: 20,
	drag: function(event, ui) { 
				 	
		if(ui.offset.left >= breite_parent){
	 		$("#debug").html("End of parent");
			$( ".switch" ).draggable( "option", "revert", false); 
			return false; // stop Drag
	 	}
	}
});

Damit hätte ich die funktionalität, dass es nach erreichen der Breite nicht mehr zurückgesetzt wird. Aber wie oben geschrieben, ist das Element dabei nicht immer wirklich am Ende ... Wieso auch immer.
Und die Funktionalität, dass ich dannach dann wieder in die andere Richtung draggen kann ist noch nicht implementiert.

cx01 · 16. November 2011

Das Problem mit den schnellen Draggen kommt wohl daher, dass die drag Methode nicht zwangsläufig aufgerufen wird. Wäre es nicht möglich, den gesamten Code einfach im dragstop-Handler auszuführen? Oder klappt das dann mit dem reverse nicht mehr?

#basTi · 16. November 2011

Würde gehn , wenn ich nicht folgende Funktionalität wollte:
Ich will, dass das draggen automatisch aufhört, sobald man am Ende angekommen ist. Realisier ich das über den stop Händler, kann ich bis zum Ende draggen und wieder zur zurück, ohne dass meine Logik feuert.

Dass die Methode nicht aufgerufen wird kann nicht sein. Denn es funktioniert ja, dass das revert deaktiviert wird und die Debug Nachricht geschrieben wird. Das Element ist aber nicht in der Position auf die ich geprüft habe. Ich prüfe explizit auf Ende und nur dann soll's gemacht werden. Hab grad in der API folgendes gefunden : refreshPositions.
Nur leider mit dem vermerk, dass es relativ langsam ist ...mal schaun ob ich das temoprär in der IF Abfrage aktiviern und gleich wieder deaktivieren kann.

carom · 16. November 2011

`basTi schrieb:
@Suchu: doch genau das soll in der API stehen.

Falls du Suchu nicht ganz verstanden hast: die API bezeichnet nicht die Dokumentation. Du findest folglich nicht die API mangelhaft, sondern die Dokumentation über eine API oder die Spezifikation der API. Die API kann nichts dafür, wenn sie nicht dokumentiert wird.

#basTi · 16. November 2011

Tut mir leid, dass ich nicht API Dokumentation sage sondern nur API...
Ich denke es war im Kontext klar was ich meine.

cx01 · 16. November 2011

`basTi schrieb:
Dass die Methode nicht aufgerufen wird kann nicht sein.

Das war falsch formuliert von mir. Ich meinte, dass sie zu selten ausgeführt wird. Also sie wird z.b. aufgerufen während das Element noch garnicht verschoben wurde. So könnte es ja theoretisch sein, dass die if-Bedingung niemals erfüllt wird und daher "revert" auch nicht deaktiviert wird.

Was wäre denn, wenn du den Code aus dem Drag-Handler ebenfalls in den dragstop-Handler kopierst? Dann dürfte es doch in jedem Falle aufgerufen werden.

#basTi · 16. November 2011

Aber die IF Bedingung muss doch erfüllt sein , weil ja der code darin ausgeführt wird.

lynxx · 17. November 2011

Du schreibst nur "Das Element ist aber nicht in der Position auf die ich geprüft habe", also kurz davor nehme ich an?
Falls nicht, wo ist es, kann es noch gedraggt werden nachdem einmal das Debug auftauchte?

Kann es sein das durch das "return false", dieses letzte Drag nicht übernommen wird ?
Also ändere Deinen Code mal so das Du Dir in einem (abbruch)-bool merkst das dass draggen jetzt beendet werden soll, aber kein return false zurückgeben, sondern am Anfang der drag-methode prüfen ob Dein abbruch-bool jetzt true ist und nur in dem Fall "return false".

Der Effekt sollte sein das auch die letzte Änderungen über >= breite_parent noch übernommen wird ..

#basTi · 17. November 2011

Danke für den Tipp. Werd's mal testen ob das was bringt.

Hab's im Moment schon anders gelöst:
Ich setze die position manuell in der stop Methode mithilfe von CSS. Aber deine Lösung wäre eleganter, wenns denn funktioniert

//Edit:

Deine Lösung funktioniert super! Daran wirds wohl gelegen haben.
Stoße aber grad auf ein neues Problem:

Auf dem iPad wird ein code anders interpretiert als auf dem PC. Konkret geht es um Folgende Situation / Code:

Code:

var status = new Array(false,false,false,false,false);
current_switch = Zahl;
if(status[current_switch]){ ... code ... }

Wenn ich mir "status[current_switch]" Ausgeben lasse, ist das Ergebnis auf dem PC korrekter weise "false", auf dem iPad aber nur der X'te Buchstabe (zB wenn Zahl = 1; Ausgabe = 'a') ...
Dadurch geht die IF Abfrage auf dem Mobilen Gerät in die Hose und ich versteh net wieso. Der scheint das Array wie n Chararray zu behandeln.

Hab grad auch noch auf status.length geprüft. Korrekt sind 5, auf dem iPad sagt er mir 29 (also anscheinend wirklich als Chararray...)

lynxx · 18. November 2011

Mhh, dann gibt es den Construktor vielleicht nicht auf dem EiPad, probier mal:

Code:

boolean[] status = { false, false, false, false, false };

oder

Code:

boolean[] status = new boolean[5];
for (int i = 0; i < status.length; status[i++] = false);

oder

Code:

var status = new Array(5);
for (int i = 0; i < status.length; status[i++] = false);

#basTi · 18. November 2011

Habs jez selbst hinbekommen. Am Konstruktor lags nicht.

Es gab ein problem mit dem Variablennamen "status" ... wieso auch immer, da es ja kein reserviertes Wort ist. Aber ein neuer Name hat alles gelöst. (wahrscheinlich greift jQuery oder so auf solche namen zu)

Danke an alle die geholfen haben ...

...
Langsam werd ich mit jQuery / JS warm

[jQuery] Mangelhafte API ?

Commodore

carom

Gast

Lieutenant

Commodore

Suchu

Gast

Lt. Junior Grade

Commodore

Lt. Junior Grade

Commodore

Lt. Junior Grade

Commodore

carom

Gast

Commodore

Lt. Junior Grade

Commodore

Lt. Junior Grade

Commodore

Lt. Junior Grade

Commodore

Ähnliche Themen