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.
Tutorial HTML, CSS u. PHP - Forum
Fragen und Antworten bei allen Problemen rund um Deine Homepage
gemeinsames Forum von www.html-seminar.de und www.PHP-Kurs.com
unser NEUES Forum gibt es unter
http://html-seminar.de/html-css-php-forum/
(Daten und Benutzer wurden übernommen, Kennwörter nicht, daher "Kennwort vergessen" beim ersten Nutzen verwenden!)
DIV verschieben?!
Moderator: lauras
DIV verschieben?!
von Yamram » Samstag 21. Januar 2012, 15:54
-
Yamram - HTML-Sonderfall
- Beiträge: 616
- Registriert: Samstag 5. Februar 2011, 20:05
- Wohnort: C:\Users\Yamram\Desktop\Papierkorb.ink
Re: DIV verschieben?!
von drPHIP132 » Samstag 21. Januar 2012, 16:00
wäre ein screenshot dieses fensters möglich?
meinst du, du kannst das fenster individuell mit der maus verschieben oder es wird aus dem nichts (bildrand) eingeschoben?
meinst du, du kannst das fenster individuell mit der maus verschieben oder es wird aus dem nichts (bildrand) eingeschoben?
-
drPHIP132 - HTML-Acrobat
- Beiträge: 744
- Registriert: Samstag 15. Januar 2011, 19:10
- Wohnort: Sachsen, Erzgebirge
Re: DIV verschieben?!
von Basiii » Samstag 21. Januar 2012, 16:16
Schau mal, ich habe schon mal einen Beitrag dazu geschrieben, die einfachste Lösung:
Basiii hat geschrieben: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:
- Code: Alles auswählen
<!doctype html>
<html>
<head>
<title>Titel</title>
<meta charset="ISO-8859-1" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<style type="text/css">
div#dragBox {
position: absolute;
top: 50px;
left: 50px;
width: 130px;
background-color: #000000;
cursor: move;
}
div#dragBox h3 {
margin: 0;
height: 25px;
padding: 0;
color: #F0F0F0;
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 25px;
}
div#dragContBox {
margin: 2px;
background-color: #C0C0C0;
padding: 5px;
font-size: 12px;
cursor: default;
}
</style>
<script language="javascript" type="text/javascript">
var dragEle = null;
var eleX = 0;
var eleY = 0;
var mouseX = 0;
var mouseY = 0;
document.onmousemove = move;
document.onmouseup = dragStop;
function dragStart(element)
{
dragEle = element;
eleX = mouseX - dragEle.offsetLeft;
eleY = mouseY - dragEle.offsetTop;
}
function dragStop()
{
dragEle=null;
}
function move(dragEvent)
{
mouseX = document.all ? window.event.clientX : dragEvent.pageX;
mouseY = document.all ? window.event.clientY : dragEvent.pageY;
if(dragEle != null)
{
dragEle.style.left = (mouseX - eleX) + "px";
dragEle.style.top = (mouseY - eleY) + "px";
}
}
</script>
</head>
<body>
<div id="dragBox" onmousedown="dragStart(this);">
<h3>Überschrift</h3>
<div id="dragContBox">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
</div>
</div>
</body>
</html>
-
Basiii - HTML-Acrobat
- Beiträge: 1139
- Registriert: Dienstag 12. Januar 2010, 13:57
Re: DIV verschieben?!
von Yamram » Samstag 21. Januar 2012, 16:19
@drPHIP132: Danke für die Hilfe 
))))
@Basiii: Perfekt, hätte nicht gedacht, dass das so einfach geht ;) Also sowas nennt man DragBox oder?
))))@Basiii: Perfekt, hätte nicht gedacht, dass das so einfach geht ;) Also sowas nennt man DragBox oder?
-
Yamram - HTML-Sonderfall
- Beiträge: 616
- Registriert: Samstag 5. Februar 2011, 20:05
- Wohnort: C:\Users\Yamram\Desktop\Papierkorb.ink
Re: DIV verschieben?!
von Basiii » Samstag 21. Januar 2012, 16:21
Nennen kannst du das Ganze wie du willst, aber ich finde DragBox logisch, da es eine verschiebbare (dragable) Box ist 
-
Basiii - HTML-Acrobat
- Beiträge: 1139
- Registriert: Dienstag 12. Januar 2010, 13:57
Re: DIV verschieben?!
von Yamram » Samstag 21. Januar 2012, 16:34
Alles klar, dann nenne ich das jetzt auch DragBox
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
Wie kann ich das denn ändern?!
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
Wie kann ich das denn ändern?!-
Yamram - HTML-Sonderfall
- Beiträge: 616
- Registriert: Samstag 5. Februar 2011, 20:05
- Wohnort: C:\Users\Yamram\Desktop\Papierkorb.ink
Re: DIV verschieben?!
von Sören » Samstag 21. Januar 2012, 19:42
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.
-
Sören - HTML-Acrobat
- Beiträge: 851
- Registriert: Samstag 5. Juni 2010, 16:00
Re: DIV verschieben?!
von Yamram » Samstag 21. Januar 2012, 19:48
Aber ich möchte das für über außer den Input-Felder haben. Das geht eigentlich nicht oder? Also mir fällt da grad nichts ein.
-
Yamram - HTML-Sonderfall
- Beiträge: 616
- Registriert: Samstag 5. Februar 2011, 20:05
- Wohnort: C:\Users\Yamram\Desktop\Papierkorb.ink
Re: DIV verschieben?!
von Sören » Samstag 21. Januar 2012, 19:57
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.
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.
-
Sören - HTML-Acrobat
- Beiträge: 851
- Registriert: Samstag 5. Juni 2010, 16:00
Re: DIV verschieben?!
von Basiii » Samstag 21. Januar 2012, 20:18
Wo liegt das Problem?
Oder habe ich dich falsch verstanden?
Und wenn man sowieso jQuery nutzt, dann doch bitte auch $( ELEMENT ).draggable();
- Code: Alles auswählen
<div id="dragBox" onmousedown="dragStart(this);">
<h3>Überschrift</h3>
<div id="dragContBox">
<form>
Name: <input type="text" /><br />
Name: <input type="text" /><br />
Name: <input type="text" /><br />
Name: <input type="text" /><br />
</form>
</div>
</div>
Oder habe ich dich falsch verstanden?
Und wenn man sowieso jQuery nutzt, dann doch bitte auch $( ELEMENT ).draggable();
-
Basiii - HTML-Acrobat
- Beiträge: 1139
- Registriert: Dienstag 12. Januar 2010, 13:57
Re: DIV verschieben?!
von Yamram » Samstag 21. Januar 2012, 21:09
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
)
Also, alles supi *__* Ihr werdet schon bald von meinem Projekt hören/ sehen und vielleicht fühlen (hahahaha
)-
Yamram - HTML-Sonderfall
- Beiträge: 616
- Registriert: Samstag 5. Februar 2011, 20:05
- Wohnort: C:\Users\Yamram\Desktop\Papierkorb.ink
Re: DIV verschieben?!
von Yamram » Samstag 28. Januar 2012, 20:48
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
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
-
Yamram - HTML-Sonderfall
- Beiträge: 616
- Registriert: Samstag 5. Februar 2011, 20:05
- Wohnort: C:\Users\Yamram\Desktop\Papierkorb.ink
Re: DIV verschieben?!
von drPHIP132 » Samstag 28. Januar 2012, 20:56
-
drPHIP132 - HTML-Acrobat
- Beiträge: 744
- Registriert: Samstag 15. Januar 2011, 19:10
- Wohnort: Sachsen, Erzgebirge
Re: DIV verschieben?!
von Yamram » Samstag 28. Januar 2012, 20:58
Ja, du bist ja lustig. Denkst du echt, daran hätte ich nicht gedacht? Natürlich habe ich den Cursor schon eingestellt:
Doch, wenn man das verschiebt kommt der doofe Cursor, CSS hin oder her...
- Code: Alles auswählen
h3 {
cursor: move;
}
Doch, wenn man das verschiebt kommt der doofe Cursor, CSS hin oder her...
-
Yamram - HTML-Sonderfall
- Beiträge: 616
- Registriert: Samstag 5. Februar 2011, 20:05
- Wohnort: C:\Users\Yamram\Desktop\Papierkorb.ink
Beiträge bitte im neuen Forum
14 Beiträge
• Seite 1 von 1
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast