• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Drag and Drop mit JavaScript/JQuery

P

phzu

Neues Mitglied
Hallo!

Da ich mir momentan versuche mich in JQuery einzuarbeiten, mochte ich folgende Aufgabe behandeln.

Ich moechte auf einer Seite anstelle mit den Scrollbalken, mit einer Art Drag and Drop navigieren. Ich brauchte eigentlich nur ein paar Stichworte nach denen ich googlen kann...

Grundlagen mit JQuery wie das einfuegen von Tags, veraendern von CSS Attributen und andere Einfache Effekte sind mir vertraut.

mfg
Phzu
 
Vielen Dank für die Links!

JQuery UI ist eigentlich genau das was ich suchte.
Habe jetzt auch schon ein paar Sachen probiert, allerdings bin ich bei meiner Drag and Drop Geschichte auf Probleme gestoßen.

Ich möchte ein Navigation, in welcher alle Menüpunkte hin und her verschiebbar sind. Also nicht einzeln, sondern in dem UL als container.

Funktioniert super, allerdings kann ich das Attribut containment nicht verwenden, da das "draggable" Objekt größer ist als der container.

Kennt da jemand einen Trick?

Folgender Code:
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <title>Animated Website</title>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
        <script src="js/jquery-1.8.2.js"></script>
        <script src="js/jquery-ui.js"></script>
        <script>
            $(function() {
                $( ".draggable" ).draggable({ axis: "x", containment: "parent"});
            });
        </script>
    </head>
    <body>
        <header id="page_header">Awsome new animated Website!</header>
        <nav id="page_navigation">
            <div id="item_container">
                <ul class="draggable">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">The Youth</a></li>
                    <li><a href="#">First Eleven</a></li>
                    <li><a href="#">Senior Team</a></li>
                    <li><a href="#">Our Stadium</a></li>
                    <li><a href="#">The Management</a></li>
                    <li><a href="#">Our Tradition</a></li>
                    <li><a href="#">Beeing Member</a></li>
                </ul>
            </div>
        </nav>
    </body>
</html>

HTML: 
*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style-type: none;
    color: #000;
}

header, footer, section, aside, nav, article{
    display: block;
}

body{
    font-size: 13px;
    font-family: Verdana, "MS Trebuchet", sans-serif;
    background-color: #000;
}

p{
    margin: 0 0 20px 0;
    line-height: 20px;
}

#page_header{
    width: 95%;
    line-height: 40px;
    margin: auto;
    text-align: center;
    background-color: #fff;
}

#page_navigation{
    width: 95%;
    height: 160px;
    overflow: hidden;
    font-size: 19px;
    font-weight: bold;
    margin: auto;
    text-align: center;
    color: #fff;
}

#page_navigation a{
    color: #fff;
    display: block;
}

#item_container{
    width: 95%;
    height: 160px;
    float: left;
}

#page_navigation ul li{
    width: 240px;
    display: inline-block;
    float: left;
    line-height: 140px;
    margin: 0 10px;
}

#page_navigation ul{
    height: 140px;
    float: left;
    margin: 10px 0;
    overflow: hidden;
    width: 2080px;
}

Hat jemand Tips für mich was ich dagegen machen kann?

mfg
 
Zuletzt bearbeitet:
Zusätzlich: Wenn ich das Containment als absolute Koordinaten angebe ([-200,0,200,0] zum Beispiel) erreiche ich zwar genau was ich will, allerdings ist der 5% Rand links und rechts inkludiert, was bei verschiedenen Viewports zu großen Problemen führt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben