Buttons sollen nur beim anklicken reagieren
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ablegen
ausrichten
beispiel
bild
button
code
demo
element
grafik
http
inhalt
klicken
problem
sache
setzen
start
stelle
url
verschieben
ziehen
-
Hallo zusammen, ich wollte wissen ob es eine Möglichkeit gibt, dass Buttons nur eine Seite öffnen wenn man sie anklickt, jedoch nicht gedrückt hält und wieder loslässt? Bin selber leider nicht versiert in Javascript.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Du willst die Seite also öffnen, wenn der User klickt, aber nicht, wenn er klickt? Glaube kaum, dass da was tolles zu machen ist. ;) Gegen versehentliche Klicker hilft ein ordentliches Design besser als Javascript-Foo.
-
Naja, ich habe ein Script eingefügt, mit dem man Grafiken verschieben kann und wollte gerne verschiebbare Buttons haben. Das Problem ist nur, das wenn man den Button loslässt, er dann die Seite öffnet. Dann muss ich wohl einen Hinweis hin machen, dass man Alt gedrückt halten muss, wenn man verschiebt (dann geht es, aber wäre ohne besser gewesen). ):
-
Google mal nach "click and hold". Dann könntest du das erkennen und mit else{} dann öffnen. Ist hald nicht eine einfache Funktion, sondern bisschen mehr, deshalb googlen. Wenn du hilfe brauchst, kann ich später darauf zurück kommen.
Sowas zum Beispiel:
function holdit(btn, action, start, speedup) { var t; var repeat = function () { action(); t = setTimeout(repeat, start); start = start / speedup; } btn.mousedown = function() { repeat(); } btn.mouseup = function () { clearTimeout(t); } }; /* to use */ holdit(btn, function () { }, 1000, 2);
Kann man auf verschiedene Arten lösen, einfach mit einem Timer.
Und sonst kann ich dir noch nen Doppelklick vorschlagen zum öffnen.
Beitrag zuletzt geändert: 13.5.2014 11:59:25 von c143 -
Ich probiere es mal. o:
Edit:
Ach Mist...mir fehlen einfach die nötigen Kenntnisse das Passende zu finden und einzubinden. :(
Beitrag zuletzt geändert: 13.5.2014 13:50:22 von chrreeview -
Schau dir doch mal diese Erklärung an:
http://aktuell.de.selfhtml.org/artikel/javascript/draganddrop/
Es gibt dort auch ein Demo. Ich denke, es dürfte nicht allzu schwer sein, das Beispiel dort so anzupassen.
Ansonsten gibt es auch noch eine ganze reihe anderer Seiten, die sich dieses Themas widmen. Bei Bedarf: Stichwort ist javascript drag and drop
-
Das mit dem Drag and Drop hab ich bereits. (: Das Problem war eher das mt dem Click and Hold bzw. Doppeklick, aber das mit dem Doppelklick habe ich jetzt gerade hinbekommen. Ist wohl nicht so elegant wie die Alternative, aber wird so gehen. Danke an alle für die Hilfe. (:
-
Ziemlich perfekt geht es mit jQuery, und zwar so:
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>Link ziehen und ablegen oder klicken</title> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http:////code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> #draggable { width: 150px; height: 150px; padding: 0.5em; background-color:silver; text-align:center; } a{ font-size:32px; font-weight:bold; } </style> <script> $(function() { $( "#draggable" ).draggable(); }); </script> </head> <body> <div id="draggable"> <p><a href="http://google.de">Link zu Google</a></p> </div> </body> </html>
Auch wenn man direkt auf den Link klickt und dabei zieht, wird die verlinkte Seite nicht geöffnet, auch nicht beim loslassen. Nur wenn man ohne zu ziehen auf den Link klickt, wird die Seite geöffnet. -
Das funktioniert so wie ich es mir wünsche, nur irgendwie kann ich keine zwei Buttons verwenden, weil der eine dann verschiebbar ist und der Andere nicht. ):
Edit:
Hm, ich habe mich damit beschäftigt und eigentlixh wäre es ne super Lösung aber das Script, das ich vorher hatte funktioniert irgendwie besser. Bei diesem streckt sich das Fenster beim verschieben und andere Grafiken am linken Rand, verschwinden ein wenig. Zudem klebt alles links am Rand und will sich irgendwie nicht so recht umplatzieren lassen. Also wenn diese Dinge nicht wären, wäre es echt perfekt. ):
Beitrag zuletzt geändert: 13.5.2014 17:49:30 von chrreeview -
Hab das script angepasst.
Hier setzt du jedem Link eine ID und musst diese natürlich auch .draggable() machen:
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>Link ziehen und ablegen oder klicken</title> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http:////code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function() { $( "#link1" ).draggable(); $( "#link2" ).draggable(); }); </script> </head> <body> <a id="link1"href="http://google.de">Google</a> <a id="link2"href="http://google.de">Lima City</a> </body> </html>
Hier werden alle a Elemente, also Links draggable gemacht, dabei brauchst du keine ID mehr zu setzen.
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>Link ziehen und ablegen oder klicken</title> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http:////code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function() { $( "a" ).draggable(); }); </script> </head> <body> <a "href="http://google.de">Google</a> <a "href="http://google.de">Lima City</a> </body> </html>
Das alles kannst du natürlich auch mit CSS gestalten wie dus willst.
Und so kannst du mit jQuery Buttons bewegen:
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>Link ziehen und ablegen oder klicken</title> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http:////code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function() { $('button').draggable({cancel:false}); }); </script> </head> <body> <button>Lima City</button> <button>Google</button> </body> </html>
Nur da hast du bei einem simplen onclick Event Listener wieder das gleiche Problem wie am Anfang.
Beitrag zuletzt geändert: 13.5.2014 18:47:05 von c143 -
Das Obere ist perfekt! Vielen Dank für die Mühe! Auch an die Anderen! (:
Eine Sache habe ich noch überlegt. Geht es eigentlich auch, dass wenn man die Sachen nach belieben verschoben hat, sie an Ort und Stelle bleiben wenn man irgendwas anklickt? Zum Beispiel man ist auf der Startseite, geht zur Fotogallerie und trotzdem ist alles noch wie man es angeordnet hat? Nicht zwingend nötig, aber würde es sicher noch mal aufwerten.
Beitrag zuletzt geändert: 13.5.2014 23:14:10 von chrreeview -
SOwas kannst du entweder per cookie (PHP) oder Session (PHP) machen ^^
-
chrreeview schrieb:
Eine Sache habe ich noch überlegt. Geht es eigentlich auch, dass wenn man die Sachen nach belieben verschoben hat, sie an Ort und Stelle bleiben wenn man irgendwas anklickt? Zum Beispiel man ist auf der Startseite, geht zur Fotogallerie und trotzdem ist alles noch wie man es angeordnet hat? Nicht zwingend nötig, aber würde es sicher noch mal aufwerten.
Sry, hab das gar nie gesehen. Mein Vorposter hat schon recht, nur will ich dir noch zeigen wie das geht. Ich habe das scirpt so angepasst, dass es dir die Position ausliest, und dann per Alert die Position mitteilt. Das kannst du dann per Ajax an PHP senden, habe ich ausgeklammert, oder direkt als Cookie speichern.
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>Link ziehen und ablegen oder klicken</title> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http:////code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function() { $( "a" ).draggable({ stack: "a", stop: function(event, ui) { var pos_x = ui.offset.left; var pos_y = ui.offset.top; var need = ui.helper.data("need"); alert('x = '+pos_x+' y = '+pos_y); /* $.ajax({ type: "POST", url: "php_script.php", data: { x: pos_x, y: pos_y, need_id: need} }).done(function( msg ) { alert( "Data Saved: " + msg ); }); */ } }); }); </script> </head> <body> <a "href="http://google.de">Google</a> <a "href="http://google.de">Lima City</a> </body> </html> -
Ach, da kamen ja noch Antworten. ^^ Also über Cookies wäre schon besser, denke ich. Wenn jemand die Seite betritt und sich alles nach Wünschen zurecht schiebt, dann will derjenige das ja beim nächsten Besuch noch so haben, um nicht alles neu anordnen zu müssen. o.o
Beitrag zuletzt geändert: 18.5.2014 21:36:41 von chrreeview -
Hallo
Ich hatte da jetzt gerade Schwierigkeiten mit Cookies. Es war so, dass wenn ich nen Cookie gesetzt hab, das Element automatisch nicht mehr draggable war. Deshalb hab ichs einfach mal mit html5 storage probiert.
Irgendwie ist meine Lösung unschön, aber sie funktioniert:
http://c143.lima-city.de/tests/draggable.html
So ungefähr hab ich mir das vorgestellt. Der Code ist:
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>Link ziehen und ablegen oder klicken</title> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http:////code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $( document ).ready(function() { $("#btngoogle").css( { "left" : localStorage.getItem("btngoogle_x")+"px", "top" : localStorage.getItem("btngoogle_y")+"px"}); $("#btnlima").css( { "left" : localStorage.getItem("btnlima_x")+"px", "top" : localStorage.getItem("btnlima_y")+"px"}); //Neue Buttons auch hier hinzufügen. Einfach Schema von oben übernehmen }); $(function() { $( "a" ).draggable({ stack: "a", stop: function(event, ui) { var pos_x = ui.offset.left; var pos_y = ui.offset.top; var need = ui.helper.data("need"); localStorage.setItem($(this).attr('id')+'_x', pos_x); localStorage.setItem($(this).attr('id')+'_y', pos_y); } }); }); </script> <style> body{ margin: 0px; padding: 0px; } a{ position: absolute; } </style> </head> <body> <a id="btngoogle" href="http://google.de">Google</a> <a id="btnlima" href="http://google.de">Lima City</a> </body> </html>
Das Problem ist nur:Web storage is supported in Internet Explorer 8+, Firefox, Opera, Chrome, and Safari.
Vielleicht hat ja noch jemand ne schönere Lösung, dir muss einfach klar sein, dass jeder Browser alles bisschen anders handhabt, und richtige Webseiten sollten überall kompatibel sein.
Ich arbeite eben selbst zum ersten mal mit jQuery, sonst immer nur mit reinem JS, kenn mich da selbst nicht so aus. Wenn du noch was brauchst, oder dir das nicht so passt, meld dich aber ruhig :)
Beitrag zuletzt geändert: 19.5.2014 19:18:27 von c143 -
Ansich funktioniert es, aber nun kann ich keine Gafiken mehr ausrichten, sondern alles klebt links oben. :(
-
chrreeview schrieb:
Ansich funktioniert es, aber nun kann ich keine Gafiken mehr ausrichten, sondern alles klebt links oben. :(
Dazu bitte mal das ganze Script? Ein Link passt auch, dann musst du nicht alles hier posten. -
Ups, hat sich erledigt. Habe eine Zeile aus meinem alten Script vergessen rein zu kopieren. :) Danke, das Script ist klasse! Falls du noch rausfindest, wie du es für ältere Versionen kompatibel machen kannst, lass es mich wissen. :)
-
Ganz vergessen: Du wirst sicher auch normale Links brauchen.
Deshalb kannst du Zeile 17 editieren, damit nur die bestimmten ID's draggable sind:
$( "#btngoogle, #btnlima" ).draggable({
Eben jede ID da schön aufführen. Könnte man auch mit einer .class lösen, was du eben lieber hast.
EDIT: Ich habe das einfach mal ganz überarbeitet, war sowieso nicht zufrieden mit dem Script. Jetzt kannst du alles was draggable sein soll einfach die class .draggable setzen, alles andere macht das Script automatisch. Schonmal eine viel schönere Lösung, für das andere muss man sich ja fast schämen, aber ich hatte eben keine Erfahrung mit jQuery:
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>Link ziehen und ablegen oder klicken</title> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http:////code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(document).ready(function(){ $( ".draggable").each(function( index ){ $(this).css({ "left" : localStorage.getItem($(this).text()+'_x')+"px", "top" : localStorage.getItem($(this).text()+'_y')+"px"}); }); }); $(function(){ $(".draggable" ).draggable({ stack: "a", stop: function(event, ui) { var pos_x = ui.offset.left; var pos_y = ui.offset.top; var need = ui.helper.data("need"); localStorage.setItem($(this).text()+'_x', pos_x); localStorage.setItem($(this).text()+'_y', pos_y); } }); }); </script> <style> body{ margin: 0px; padding: 0px; } a{ position: absolute; } </style> </head> <body> <a class="draggable" href="http://google.de">Google</a> <a class="draggable" href="http://google.de">Lima City</a> </body> </html>
Hier siehst du noch, welche Browser unterstützt werden:
http://up.picr.de/18356395mw.jpg
Und das ganze funktioniert nicht nur mit Links, habs auch mit normalen divs oder Bildern getestet, einfach die class draggable im Element setzen.
Livedemo
Viel Spass! :-)
Beitrag zuletzt geändert: 21.5.2014 19:46:39 von c143 -
Soweit geht es aber bei mir, wie auch bei deiner Demo besteht das Problem, dass wenn man die Seite nach dem Verschieben neu Läd, die Grafiken sich verschieben und an der Großen ausrichten. ):
Beitrag zuletzt geändert: 21.5.2014 20:25:12 von chrreeview -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
