nicht angemeldet
Drag and drop jquery
StruppiHallo alle zusammen
Und zwar brauch ich mal eure hilfe.
Ich habe 3 div boxen.
Die ersten 2 sind 2 item boxen
<div class="draggable">1</div>
<div class="draggable">2</div>
die 3te ist sozusagen ein mülleimer
<div class="dropable">Löschen</div>
Nun möchte ich das wenn ich einen von beiden (draggable) in den Mülleimer lege, das es sich dan selber löschen tut.
Wie bekomm ich sowas hin?
-
Wie bekomm ich sowas hin?
Indem du ggf. zumindest die Überschriften der vorzüglichen Dokumentation liest.
-
Das hatte ich schon
jedoch passiert da garnichts.<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script> </head> <body> <style type="text/css"> #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; background-color: #112233;} #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; background-color: #445566;} </style> <script type="text/javascript"> $(function() { $("#draggable").draggable(); $("#droppable").droppable( "disable" ); }); </script> <div class="demo"> <div id="draggable" class="ui-widget-content"> <p>Drag me to my target</p> </div> <div id="droppable" class="ui-widget-header"> <p>Drop here</p> </div> </div><!-- End demo --> <div style="display: none;" class="demo-description"> <p>Enable any DOM element to be droppable, a target for draggable elements.</p> </div><!-- End demo-description --> </body> </html>-
Das hatte ich schon
Dann solltest du ggf. den Rest der Dokumentation betreffenden Dokumentation lesen. z.B. dass droppable() ein Argument benötigt.
jedoch passiert da garnichts.
Stimmt, works as designed.
-
z.B. dass droppable() ein Argument benötigt.
[...] ein sinnvolles Argument [...]
-
xP
Ich glaub ich bin zu blöde dafür.
-
Ich glaub ich bin zu blöde dafür.
Möglicherweise, denn du schaffst es nichtmal ein Beispiel 1:1 zu kopieren. Alternativ könnte auch das aneignen von Programmiergrundlagen ausreichen - oder zumindest das Verständnis von "Kausalität" - das lernen Kinder normalerweise im Alter von etwa 1 1/2 bis 2 Jahren.
Ich ziele damit auf folgendes ab: "Wenn ich eine Funktion ausführe, passiert etwas - wenn ich nichts ausführe, passiert nichts".
-
Das problem ist einfach:
Ich hasse javascript und Ajax!!Programmier grundlagen hab ich genug xP
Ich behersche php, html, css, mysql, as2 und 3, typoscript und java.
Naja vergessen wir das ganze einfach mal, wenn jemand will kann er den thread zumachen.Und das mit dem 1 zu 1 kopieren :)
Ich hab das mit dem destroy probiert reinzunehmen was ja nicht ging.-
Programmier grundlagen hab ich genug xP
Das bezweifle ich, wenn du nichtmal ein Beispiel 1:1 kopieren kannst.
Ich behersche [...] typoscript [...]
Das ist gewagt, denn das behaupten nichtmal Kasper Skårhøj oder Michael Stucki.
Naja vergessen wir das ganze einfach mal, wenn jemand will kann er den thread zumachen.
Entschuldige bitte meine Gehässigkeit: Man merkt, dass du das Zeug zum Programmierer hast.
-
Programmier grundlagen hab ich genug xP
Ich behersche php, html, css, mysql, as2 und 3, typoscript und java.
Das kann man kaum glauben nach dem Thread.
Und das mit dem 1 zu 1 kopieren :)
Ich hab das mit dem destroy probiert reinzunehmen was ja nicht ging.Warum "probieren"? Warum liest du nicht eine Dokumentation, das verringert das probieren um ein erhebliches Maß.
"nicht gehen" - deutet darauf hin, dass du nicht weißt, wo du die JS Fehlermeldungen findest. Da wir nicht Wissen welchen Browser du verwendest, können wir dir das nicht konkret sagen, aber wenn du selber mal nach Fehlerkonsole und den Namen deines Browsers googlest solltest du fündig werden.
Struppi.
-
-
-
-
-
Hi,
jedoch passiert da garnichts.
Das glaub ich gerne...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>... denn ui besteht aus einer core-Datei, die mit Plugins ergänzt wird. Du solltest also vielleicht erst mal alle nötigen Sachen einbinden, siehe z.B:
http://jqueryui.com/downloadGruesse, Joachim
--
Am Ende wird alles gut.-
... denn ui besteht aus einer core-Datei, die mit Plugins ergänzt wird. Du solltest also vielleicht erst mal alle nötigen Sachen einbinden, siehe z.B:
http://jqueryui.com/downloadDaran liegts mit sicherheit nicht - da wird explizit jQuery eingebunden udn dann jQuery UI komplett mit sämtlichen Plugins. Jedes Plugin als eigene Ressource einzubinden ist ziemlich unsinnig - außer vielleicht, man will einen Rekord bei der Anzahl der HTTP-Requests aufstellen ;)
-
Nachtrag: ich würde allerdings jQuery UI minifiziert einbinden, es gibt afaik keinen Grund[1] es nicht zu tun.
[1] irgendwann gabs da mal einen Bug, der wurde aber afaik gefixt.
-
Hi,
[1] irgendwann gabs da mal einen Bug, der wurde aber afaik gefixt.
ja bei Mobil-Anwendungen, afaik wenn Vodafone der Provider war... muss ich nochmal nachfragen.
Gruesse, Joachim
--
Am Ende wird alles gut.
-
-
Hi,
Jedes Plugin als eigene Ressource einzubinden ist ziemlich unsinnig - außer vielleicht, man will einen Rekord bei der Anzahl der HTTP-Requests aufstellen ;)
Das schon, aber es lässt sich ja individuell zusammenstellen. So schleppt man natürlich viel Ballast rum...
Ich nutze das Zeugs immer einzeln, das läuft dann eh noch durch ein Unify-Script (=> 1 Request) ...Gruesse, Joachim
--
Am Ende wird alles gut.-
Das schon, aber es lässt sich ja individuell zusammenstellen. So schleppt man natürlich viel Ballast rum...
Jein, wenn man die Sache über ein CDN wie eben Google einbindet, ist es wahrscheinlich, dass der Besucher das Ding schon im Cache hat.
Ich nutze das Zeugs immer einzeln, das läuft dann eh noch durch ein Unify-Script (=> 1 Request) ...
Wenn man selbst anbietet, ist das natürlich das Mittel der Wahl.
-
-
-
-
Das hatte ich schon
jedoch passiert da garnichts.Das ist seltsam, dein Code funktioniert bei mir http://selfhtml.jstruebig.de/Drag and drop jquery.html
Struppi.
-
Das ist seltsam, dein Code funktioniert bei mir http://selfhtml.jstruebig.de/Drag and drop jquery.html
Ja - bei mir funktioniert es auch wie im Code beschrieben.
Nun möchte ich das wenn ich einen von beiden (draggable) in den Mülleimer lege, das es sich dan selber löschen tut.
Aber es tut sich dann nicht selber löschen :p
Eh klar: "Wenn ich eine Funktion ausführe, passiert etwas - wenn ich nichts ausführe, passiert nichts".
-
Das ist seltsam, dein Code funktioniert bei mir http://selfhtml.jstruebig.de/Drag and drop jquery.html
Ja - bei mir funktioniert es auch wie im Code beschrieben.
Ja, was nicht zu der Aussage paßt, "es passiert nichts"
Struppi.
-
Da geb ich dir recht. ^^
Naja ich werde es selber schon irgendwie hinbekommen ^^
Bis jetzt löscht sich bei mir der mülleimer und nicht das was ich einlegen xP-
Naja ich werde es selber schon irgendwie hinbekommen ^^
Kein Problem, wir helfen dir aber gerne, nur musst du uns dann schon zeigen wobei. Mit "es funktioniert nicht" können wir nicht viel anfangen.
Bis jetzt löscht sich bei mir der mülleimer und nicht das was ich einlegen xP
Dann machst du etwas falsch.
Struppi.
-
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script> </head> <body> <style type="text/css"> #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; background-color: #110044;} #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; background-color: #0000ff;} </style> <script type="text/javascript"> $(function() { $("#draggable").draggable(); $("#droppable").droppable({ drop: function(event, ui) { $(this).remove(); } }); }); </script> <div class="demo"> <div id="draggable" class="ui-widget-content"> <p>Drag me to my target</p> </div> <div id="droppable" class="ui-widget-header"> <p>Drop here</p> </div> </div><!-- End demo --> <div style="display: none;" class="demo-description"> <p>Enable any DOM element to be droppable, a target for draggable elements.</p> </div><!-- End demo-description --> </body> </html>Ich weiß das ich irgendwie das objekt übergeben muss, ich weiß leider nur nicht wie
-
$("#draggable").draggable(); $("#droppable").droppable({ drop: function(event, ui) { $(this).remove();this ist die Referenz auf sich selbst bzw das derzeitig durch jQuery selektierte Element - in diesem Fall #droppable - eh klar, dass das Ding entfernt wird.
Ich weiß das ich irgendwie das objekt übergeben muss, ich weiß leider nur nicht wie
Du sagtest du beherrscht CSS: die $-Funktion nimmt als erstes Argument einen CSS-kompatiblen Selektor.
$('body').remove(); würde z.B. das body-Element wegballern.
-
$('body').remove(); würde z.B. das body-Element wegballern.
Ja das kann ich jedoch nicht benutzen, da ich mehrere elemente erstellen muss die man bewegen kann, und ich nicht für jeden einzelnd ein mülleimer machen kann.
Das muss doch irgendwie gehen mit objeckte übergeben oder?
-
Das muss doch irgendwie gehen mit objeckte übergeben oder?
oder was? Steht doch in der Doku http://jqueryui.com/demos/droppable/#event-drop
Struppi.
-
Das muss doch irgendwie gehen mit objeckte übergeben oder?
oder was? Steht doch in der Doku http://jqueryui.com/demos/droppable/#event-drop
Struppi.
<style type="text/css"> #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; background-color: #110044;} #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; background-color: #0000ff;} </style> <script type="text/javascript"> $(function() { $("#draggable").draggable(); $("#droppable").bind( "drop", function(event, ui) { $(this).remove(); } }); }); </script>jetzt funktioniert garnichts mehr xP
-
jetzt funktioniert garnichts mehr xP
Deine umfassenden Programmierkenntnisse dürften sich wirklich nur auf "copy,paste&hope-that-it-works" beschränken.
Da steht doch ganz deutlich:
"$(this) represents the droppable the draggable is dropped on. ui.draggable represents the draggable."
Du willst nicht das droppable (den "Mülleimer") sondern das "draggable" (also die herumziehbaren Elemente) entfernen - sagtest du zumindest.
-
jetzt funktioniert garnichts mehr xP
Deine umfassenden Programmierkenntnisse dürften sich wirklich nur auf "copy,paste&hope-that-it-works" beschränken.
Da steht doch ganz deutlich:
"$(this) represents the droppable the draggable is dropped on. ui.draggable represents the draggable."
Du willst nicht das droppable (den "Mülleimer") sondern das "draggable" (also die herumziehbaren Elemente) entfernen - sagtest du zumindest.
ka ob das in javascript funktion
ich könnte es ja auch mit getelementbyid / name machen, aber das bringt mir wie gesagt nichts :)
Das this sich auf das elemt bezieht in dem es steht ist mir auch klar. (oder wenn man eine funktion schreibt das elemnt das übergeben wird)
In java kann man ja funktionen schreiben wie:
public void loeschen(int id, objekt){
$this.remove();
}und sie dan so ansprechen
Haus blub = new objekt Haus
(kostruktor muss halt geschrieben werden)
und dan zb
haus.loeschen(1, schluessel1)doch wie ach ich das in dem ding da? (Das ist selbst geschrieben und kein copy and paste :))
-
"$(this) represents the droppable the draggable is dropped on. ui.draggable represents the draggable."
Das this sich auf das elemt bezieht in dem es steht ist mir auch klar. (oder wenn man eine funktion schreibt das elemnt das übergeben wird)
Und da steht auch wie die Referenz auf das andere Element heißt - zwei Sätze, für beide Möglichkeiten.
Die erste willst du nicht - was bleibt dann noch übrig?
doch wie ach ich das in dem ding da?
Das übergebene Objekt in der callback-Funktion heisst ui (das zweite Argument) - und das hat eine entsprechende Methode die genau die Referenz auf das Element liefert, welches gerade über dem droppable losgelassen wurde.
btw: Der Zeigefinger ist vermutlich defekt. Erscheint Probleme bei der Beugebewegung zu haben, ersetze ihn bei nächster Gelegenheit :p
-
-
-
Das muss doch irgendwie gehen mit objeckte übergeben oder?
oder was? Steht doch in der Doku http://jqueryui.com/demos/droppable/#event-drop
jetzt funktioniert garnichts mehr xPDas du vorgibst Java zu beherrschen macht mir Sorge, hier ist von zwei Parametern die Rede. Das PHP'ler damit Schwierigkeiten haben, verstehe ich, aber eigentlich sollte man das doch verstehen als Java Programmierer. Und es wird sogar gezeigt welche Eigenschaft das "gedroppte" Elemente ist, warum willst du denn immer den Mülleimer löschen?
Struppi.
-
-
-
-
-
-
-
-
-
-
-
-