Buttons sollen nur beim anklicken reagieren

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

20:34, 21.5.2014

chrreeview schrieb:
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. ):

Mein Fehler. Ich habe den Inhalt mit .text() ausgelesen. Damit werden keine HTML Elemente mitgelesen und beide Bilder hatten also mit .text() einfach keinen Inhalt und wurden beide gleich gespeichert. Mit .html() wird das behoben, hier das Script:

<!doctype html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <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).html()+'_x')+"px", "top" : localStorage.getItem($(this).html()+'_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).html()+'_x', pos_x);
                  localStorage.setItem($(this).html()+'_y', pos_y);
              }
          });
        });
        
        
    </script>
    <style>
        body{
            margin: 0px;
            padding: 0px;
        }
        a{
            position: absolute;
        }
    </style>
</head>
    <body>
        <a class="draggable" href="http://google.de"><img src="http://chrreeview.lima-city.de/images/buttons/hobby.jpg" width="100px" height="100px" border="0" alt="Hobby"></a>
        <a class="draggable" href="http://google.de">Lima</a>
        <a class="draggable" href="http://google.de">City</a>
        <a class="draggable" href="http://google.de">Lima City</a>
        <img class="draggable" src="http://chrreeview.lima-city.de/images/titel.jpg" width="200px" height="200px" border="0">
    </body>
</html>

Beitrag zuletzt geändert: 21.5.2014 20:40:14 von c143

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
Autor dieses Themas
chrreeview

chrreeview hat kostenlosen Webspace.

20:43, 21.5.2014
Jetzt funktionierts! :) Super Danke! Echt ein super Script. :)

c143

c143 hat kostenlosen Webspace.

20:57, 21.5.2014

chrreeview schrieb:
Jetzt funktionierts! :) Super Danke! Echt ein super Script. :)

Zu früh gedankt, haha. Bin ich heute schusselig. Grad Sekunden später, habe ich gemerkt, dass das zwar mit .html() in a Elementen funktioniert, aber wenn ein Bild alleine ist, hat es ja keinen Inhalt. Deshalb überprüfe ich jetzt zuerst, wenn der Inhalt leer ist, dann soll er src nehmen, also der Bildlink. Ausserdem habe ich im CSS noch was geändert, dass die ganze Klasse auch absolut positioniert ist und nicht nur die Links, war auch noch ein Fehler:

<!doctype html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <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){
                  if($(this).html() == ''){ content = $(this).attr('src'); }else{ content = $(this).html(); }
				  $(this).css({ "left" : localStorage.getItem(content+'_x')+"px", "top" : localStorage.getItem(content+'_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");

                  if($(this).html() == ''){ content = $(this).attr('src'); }else{ content = $(this).html(); }
                    
                  localStorage.setItem(content+'_x', pos_x);
                  localStorage.setItem(content+'_y', pos_y);
              }
          });
        });
        
        
    </script>
    <style>
        body{
            margin: 0px;
            padding: 0px;
        }
        .draggable{
            position: absolute;
        }
    </style>
</head>
    <body>
        <a class="draggable" href="http://google.de"><img src="http://chrreeview.lima-city.de/images/buttons/hobby.jpg" width="100px" height="100px" border="0" alt="Hobby"></a>
        <a class="draggable" href="http://google.de">Lima</a>
        <a class="draggable" href="http://google.de">City</a>
        <a class="draggable" href="http://google.de">Lima City</a>
        <img class="draggable" src="http://www.lima-city.de/images/avatar/GOUs0N9elDswTYc.jpeg" width="200px" height="200px" border="0">
        <img class="draggable" src="http://chrreeview.lima-city.de/images/titel.jpg" width="200px" height="200px" border="0">
    </body>
</html>

JETZT müsste alles passen. Hoffenlitch. :lol:

Beitrag zuletzt geändert: 21.5.2014 20:57:47 von c143

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city