DIV verschieben?!

  • Hey Leute,
    ich bin total neidisch geworden, als ich bei Twitter gesehen habe, dass man die "Scheinfenster" verschieben kann O.o Da habe ich mich natürlich sofort gefragt, wie man das macht… Nachdem ich ungefähr 10 Minuten bei Google danach gesucht habe und nichts gefunden habe, dachte ich mir: Befrag doch mal das Forum! Ich denke mal, dass Javascript da eine große Rolle spielt. Also, ich habe ein Scheinfenster, das ich verschieben möchte. Dieses ist mit position: fixed und blablabla in die Mitte gemacht. Doch wie geht das?!


    Mit freundlichen Grüßen,
    Philipp E.

  • Schau mal, ich habe schon mal einen Beitrag dazu geschrieben, die einfachste Lösung:


    Zitat von "Basiii"

    Für die verschiebbare Box mache ich dir jetzt gleich ein Beispiel, das mit dem Account Dingsi kann ich mir leider nicht angucken.


    Hier mal der Quellcode:


  • Alles klar, dann nenne ich das jetzt auch DragBox 8)8)8)



    EDIT - 21.01.2012 18:23 Uhr
    Ich habe jetzt mal ein Formular darein gepackt. Wenn man jetzt zum Beispiel etwas markieren will, dann verschiebt sich die Box anstatt, dass sich etwas markiert :shock: Wie kann ich das denn ändern?!

  • Du definierst in dem div ein Unterelement (z.B. eine Leiste oben) und definierst das onmousedown-Event eben in dem Element und nicht für den ganzen div.

  • Werden die Events überladen, also wenn du in den input-Feldern ein anderes onmousedown deklarierst wird das Andere nicht ausgeführt? Musst mal ausprobieren.


    Andere Möglichkeit: Prüfen ob eines der Input-Felder im Hover-Zustand oder Focus-Zustand ist. Also mit jQuery ob ein Element $('#dragBox input:hover') oder eben :focus existiert.
    Hab ich aber nicht ausprobiert.

  • Wo liegt das Problem?



    Oder habe ich dich falsch verstanden?


    Und wenn man sowieso jQuery nutzt, dann doch bitte auch $( ELEMENT ).draggable();

  • Es ging darum, dass man in der DragBox dann nichts markieren konnte?! Anstatt dessen hat man das ganze Ding verschoben. Aber ich habe das jetzt geregelt, indem ich einfach nur h3 mit onmousedown versehen habe und entsprechend das Element geändert habe.


    Also, alles supi *__* Ihr werdet schon bald von meinem Projekt hören/ sehen und vielleicht fühlen (hahahaha :D)
    Ich erstelle eine neue Antwort, weil das nichts mehr mit der alten Antwort zu tun hat.


    Wenn ich das DIV verschiebe, dann kommt da immer dieser doofe Cursor. Dieser Cursor wird auch immer benutzt, wenn man Text markiert. Wie kann ich das ändern? Ich will, dass da immer noch dieser Move-Cursor ist. Aber wie geht das? O.o

  • Ja, du bist ja lustig. Denkst du echt, daran hätte ich nicht gedacht? Natürlich habe ich den Cursor schon eingestellt:


    Code
    h3 {
      cursor: move;
    }


    Doch, wenn man das verschiebt kommt der doofe Cursor, CSS hin oder her...

  • Versuch's mal mit

    Code
    <div id="dragBox" onclick="dragStart(this); document.getElementById('dragBox').style.cursor = 'move'" ondblclick="dragStop()">


    Das verändert zwar die Art der Verschiebung ein bisschen, dafür bleibt der cursor aber auf 'move'.

  • Hallo,


    ich würde gerne 2 Sachen noch einfügen zu diesem code.


    1. Wenn ein User das box verschiebt, soll er nur in einer gewissen div Bereich verschieben können.


    2. Wenn in div "box" ein Link (URL) ist und der User drauf klickt, soll
    der Box nicht wider auf sein ursprüngliches Position springt bzw... kann man auch sagen, wenn die Seite neu geladen wird, kommt der
    box in seiner ursprünglichen Position zurück und das will ich nicht.


    Könnt ihr mir da helfen ??


    Ich habe schon so was in jquery gesehen http://jqueryui.com/sortable/#portlets


    Jedoch möchte ich das nicht verwenden.


    Lg Eddy

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!