Sie sind nicht angemeldet.

Sonstiges Div per klick verschieben

  • 1
  • 2

[ASTERIX]

Windesigner

  • »[ASTERIX]« ist männlich
  • »[ASTERIX]« ist der Autor dieses Themas

Beiträge: 1 553

Betriebssystem(e): Windows Vista

Sprache(n): Deutsch, Englisch, Französisch & [HTML, CSS, JS, PHP, VisualBasic, Delphi, C++]

Wohnort: Schweiz

Beruf: Schule

  • Nachricht senden

1

Freitag, 6. April 2007, 18:00

Div per klick verschieben

Hallo zusammen,

Zu meiner am enstehenden Website möchte ich gerne eine funktion hinzufügen, Divs, wie bei Fenster, verschieben zu können. Das man also einfach oben auf die umrahmung des "Fensters" oder eben Divs draufdrücken könnte und sich das Fenster gleich wie der Cursor bewegen würde. Wenn man dann wieder auf der Maus "loslassen" würde, würde sich das Fenster stillhalten. Zum besseren verständniss: Ich möchte es ähnlich machen wie bei der Personalisierten Starterseite von Google. Oder halt einfach so wie beim verschieben einens normales Fensters.
Wie kann ich das machen?
Könte mir jemand ein fertiges Script liefern, hab bei Google nichts gefunden.

MFG
[ASTERIX]

____[asterix]_____

Maerim

Winhelfer

  • »Maerim« ist männlich

Beiträge: 1 472

Betriebssystem(e): Mac OS X, Windows XP, Ubuntu

Sprache(n): Züridütsch, Deutsch, Englisch

Wohnort: Schweiz, Wermatswil, oberhalb von Uster

Beruf: Informatiker (Systemtechniker)

  • Nachricht senden

2

Freitag, 6. April 2007, 19:16

Hier gibts ne Java Script Bilbiothek für diesen Zweck, inkl. Beispielcode: http://www.walterzorn.de/dragdrop/dragdrop.htm
DON'T PANIC


www.maerim.ch - Mein Blog

If war is the answer, the question must be fucking stupid!

[ASTERIX]

Windesigner

  • »[ASTERIX]« ist männlich
  • »[ASTERIX]« ist der Autor dieses Themas

Beiträge: 1 553

Betriebssystem(e): Windows Vista

Sprache(n): Deutsch, Englisch, Französisch & [HTML, CSS, JS, PHP, VisualBasic, Delphi, C++]

Wohnort: Schweiz

Beruf: Schule

  • Nachricht senden

3

Freitag, 6. April 2007, 19:20

Super, hargenau nach sowas habe ich gesucht! Danke.

____[asterix]_____

aargau

Moderator

  • »aargau« ist männlich

Beiträge: 3 677

Betriebssystem(e): Windows XP Pro, Windows 7 Ultimate, Windows Server 2003, [Linux]

Sprache(n): Schwiizerdütsch, Deutsch, Englisch

Wohnort: Schweiz - Aargau - Stein

Beruf: Informatiker

  • Nachricht senden

4

Freitag, 6. April 2007, 20:57

Könnte man irgend wie die Position der Divs (nach dem Verschieben) auslesen und in eine Datenbank speichern? Das währe noch Cool wenn die User ihr Profil selbst gestalten könnten
Gruss
Aargau
Mein Blog | PartyZeit.ch | MarcoVolt.ch

Maerim

Winhelfer

  • »Maerim« ist männlich

Beiträge: 1 472

Betriebssystem(e): Mac OS X, Windows XP, Ubuntu

Sprache(n): Züridütsch, Deutsch, Englisch

Wohnort: Schweiz, Wermatswil, oberhalb von Uster

Beruf: Informatiker (Systemtechniker)

  • Nachricht senden

5

Freitag, 6. April 2007, 22:23

Sollte mit ein bisschen Java Script und einem PHP Script möglich sein. Wie das jedoch genau funktioniert weiss ich auch nicht, kenne mich mit Java Script leider nicht aus...
DON'T PANIC


www.maerim.ch - Mein Blog

If war is the answer, the question must be fucking stupid!

aargau

Moderator

  • »aargau« ist männlich

Beiträge: 3 677

Betriebssystem(e): Windows XP Pro, Windows 7 Ultimate, Windows Server 2003, [Linux]

Sprache(n): Schwiizerdütsch, Deutsch, Englisch

Wohnort: Schweiz - Aargau - Stein

Beruf: Informatiker

  • Nachricht senden

6

Freitag, 6. April 2007, 22:24

Ok, dann werde ich mich mal auf die Suche machen. Vieleicht finde ich ja was passendes :)
Gruss
Aargau
Mein Blog | PartyZeit.ch | MarcoVolt.ch

gucky

Winhelfer

  • »gucky« ist männlich

Beiträge: 3 882

Wohnort: nähe Lübeck

  • Nachricht senden

7

Samstag, 7. April 2007, 00:15

Also was definitiv möglich ist ist das du den Wert der Verschiebung aufzeichnest (also x +20 und y +90) und dann kannst dadran ja alles andere berechnen.

Nur vermute ich das du dafür das gesammte Ding umschreiben musst und net einfach die Fertig-Variante nehmen kannst ;)
-/// -

[ASTERIX]

Windesigner

  • »[ASTERIX]« ist männlich
  • »[ASTERIX]« ist der Autor dieses Themas

Beiträge: 1 553

Betriebssystem(e): Windows Vista

Sprache(n): Deutsch, Englisch, Französisch & [HTML, CSS, JS, PHP, VisualBasic, Delphi, C++]

Wohnort: Schweiz

Beruf: Schule

  • Nachricht senden

8

Samstag, 7. April 2007, 10:45

Irgendwie will das bei mir nicht klappen. Ich bin aber sicher das es an mir liegt, den ich blick da nicht ganz durch.
Könnte mir jemand kurz sagen wie ich das machen muss, denn ich weis nicht einmal wo ich das dd.elements.namedesdivs.moveto() hintun muss. Ausserdem weis ich nicht was ich in den klammern angeben muss, den irgendwie sollte es sich ja dort hinbewegen wo der Cursor durchget.

____[asterix]_____

gucky

Winhelfer

  • »gucky« ist männlich

Beiträge: 3 882

Wohnort: nähe Lübeck

  • Nachricht senden

9

Samstag, 7. April 2007, 11:34

Habs mal ganz kurz getestet:

http://mausbiber.mine.nu/projekt/test.html
-/// -

[ASTERIX]

Windesigner

  • »[ASTERIX]« ist männlich
  • »[ASTERIX]« ist der Autor dieses Themas

Beiträge: 1 553

Betriebssystem(e): Windows Vista

Sprache(n): Deutsch, Englisch, Französisch & [HTML, CSS, JS, PHP, VisualBasic, Delphi, C++]

Wohnort: Schweiz

Beruf: Schule

  • Nachricht senden

10

Samstag, 7. April 2007, 12:13

Ach klar, danke! Ich habe vergessen das position:absolute zu machen! Jetzt funktionierts.
[EDIT]
So, ich habs per Array (PHP) jetzt geschafft das mehrere "Fenster" offen sein können. Nun habe ich aber ein Problem mit den id's, denn jede von denen muss ja eindeutig sein. Ich habe es jetzt aber so gemacht das per Foreach immer die Tabellen und co. gemacht werden bis der Array leer ist. Aber so schafe ich es irgendwie nicht jeder Tabelle eine eigene ID zu geben. Kann mir jemand eine Lösung sagen?
Hier der Code zum besseren verständniss:

PHP-Quelltext

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

<?php
session_start();
if (!isset($_GET['actpg'])) {
$_SESSION['actpg'] = "home";
$_SESSION['actpg'] .= ".php";
$_SESSION['pgs'] = array("Home.php");
}
else {
$_SESSION['actpg'] = "SITES/";
$_SESSION['actpg'] .= $_GET['actpg'];
$_SESSION['actpg'] .= ".php";
array_push($_SESSION['pgs'],$_SESSION['actpg']);
}
$_SESSION['ip'] = $_SERVER['REMOTE_ADDR'];
if (!isset($_SESSION['pw'])) {
$_SESSION['uname'] = "";
$_SESSION['pw'] = "";
$_SESSION['loggedin'] = 1;
}
else {
$_SESSION['uname'] = $_SESSION['uname'];
$_SESSION['pw'] = $_SESSION['pw'];
$_SESSION['loggedin'] = 0;
}
?>
</head>
<body>
<script type="text/javascript" src="DATA/wz_dragdrop/wz_dragdrop.js"></script>
<div class="header">
<div><img src="DATA/STYLE/l.png" class="headlogo"><font id="headfont">Das Portal für PC-Interessierte.<br><marquee scrollamount="3" class="newmarquee">Dies ist nur ein Test. Hoffentlich sieht man diesen Text durch den Bildschirm "fliegen".</marquee></font></img></div>
</div>
<div width="100%">
<div class="navi"><img src="DATA/STYLE/navigation.png" class="topico"><font id="navfont"><a href="index.php">Home</a></font></img></div><br>
<div class="container">
<div class="left" style="float:left">
<div class="lefttitle">SIDEBAR</div>
<br>Deine IP ist <?php echo $_SESSION['ip']; ?>.
<br>Du bist hier: <?php echo $_SESSION['actpg']; ?></br>
<?php if($_SESSION['loggedin'] == 0)
{
echo "Du bist nicht eingeloggt.";
}
else
{
echo "Hallo, ",$_SESSION['uname'],".";
}
?>
<form action="index.php?actpg=registrieren" method="post">
<input type="text" value="Username" name="user" class="navloggon"></input>
<input type="text" value="Passwort" name="pasw" class="navloggon"></input>
<input type="submit" value="Anmelden" class="navloggon"></input>
</form>
<form action="SITES/registrieren.php" method="post">
<input type="Submit" value="Registrieren" class="navloggon"></input>
</form>
Aktuell Geöffnete Seiten:<br>
<?php
  foreach($_SESSION['pgs'] as $seiten)
    {
    echo $seiten;
    echo "<br>";
    }
?>
</div>
<?php 
$pg = $_SESSION["actpg"];
$pag = $_SESSION["pgs"];
$zahl = count($pag);
?>
<?php
$anbr = 1;
foreach($pag AS $sitep)
{
$anbr++;
?>
<div id="page2">
<div id="pagetitle">
<?php $wophp = ereg_replace(".php","",$sitep); echo $wophp; ?></div>
<div id="page"><?php
include("$sitep"); 
?>
<br><div class="footer"><?php include('SITES/search.php'); ?></div></div></div>
</div>
</div>
<?php
}
?>

<script type="text/javascript">
<!--
SET_DHTML("pg<?php echo $anbr; ?>"+TRANSPARENT+CURSOR_MOVE,"page2"+TRANSPARENT+CURSOR_MOVE,"page"+NO_DRAG+TRANSPARENT);
//-->
</script>


[[EDIT]]
Könnte ich als lösung der obigen Frage den divs als ID auch eine PHP Variable mitgeben, damit jede ID einzigartig währe???

____[asterix]_____

EhTy

unregistriert

11

Samstag, 7. April 2007, 20:36

Du köntest doch in PHP einen Zähler festlegen oder dein Array für eine Namensvergabe nutzen, dann gints du jedem Div (?) das sich frei bewegen können soll eine einmalige ID...

gucky

Winhelfer

  • »gucky« ist männlich

Beiträge: 3 882

Wohnort: nähe Lübeck

  • Nachricht senden

12

Sonntag, 8. April 2007, 00:05

genau, ich würde einfach als ID "ID+$count" nehmen und vor jede Vergabe nen $count++ schreiben. Am ende dann alle IDs auflisten zB. mit ner while-Schleife.
-/// -

[ASTERIX]

Windesigner

  • »[ASTERIX]« ist männlich
  • »[ASTERIX]« ist der Autor dieses Themas

Beiträge: 1 553

Betriebssystem(e): Windows Vista

Sprache(n): Deutsch, Englisch, Französisch & [HTML, CSS, JS, PHP, VisualBasic, Delphi, C++]

Wohnort: Schweiz

Beruf: Schule

  • Nachricht senden

13

Sonntag, 8. April 2007, 10:16

Wenn ich jetzt den divs den Namen der Seite als ID mitgebe und zwei "Fenster" offen sind bekomme ich aber so ne Fehlermeldung wie im anhang. Was mach ich falsch?
PS: So gebe ich dem Div die ID:
<div id="$sitep" style="position:absolute; width:80%;">
Beim JvaScript vereinbare ich das dan auch so:
<script type="text/javascript">
<!--
SET_DHTML("$sitep"+TRANSPARENT+CURSOR_MOVE,"page"+NO_DRAG+TRANSPARENT);
//-->
</script>
[EDIT]
Bei der Index gibt es übrigens gar keine 196 Zeilen. Es geht nur bis 116;
[[EDIT]]
So jetzt hab ichs geschafft. Das Problem hat darran gelegen das ich nur "page2" einzigartig machte. Ich hätte die Variable "page" auch noch "einzigartig" machen müssen...
»[ASTERIX]« hat folgendes Bild angehängt:
  • 2007-04-08_101549.png

____[asterix]_____

[ASTERIX]

Windesigner

  • »[ASTERIX]« ist männlich
  • »[ASTERIX]« ist der Autor dieses Themas

Beiträge: 1 553

Betriebssystem(e): Windows Vista

Sprache(n): Deutsch, Englisch, Französisch & [HTML, CSS, JS, PHP, VisualBasic, Delphi, C++]

Wohnort: Schweiz

Beruf: Schule

  • Nachricht senden

14

Sonntag, 8. April 2007, 10:46

Qualität

Eigentlich funktioniert's jetzt ja, doch nun habe ich, wenn ich das Fenster verschiebe mit grossen Qualitätseinbussen probleme, wie im anhang. Das erste bild ist Vorher, das zweite Nach der Verschiebung. Was mach ich da falsch?
»[ASTERIX]« hat folgende Bilder angehängt:
  • 2007-04-08_104427.png
  • 2007-04-08_104445.png

____[asterix]_____

gucky

Winhelfer

  • »gucky« ist männlich

Beiträge: 3 882

Wohnort: nähe Lübeck

  • Nachricht senden

15

Sonntag, 8. April 2007, 11:16

Compilier die Seite mal und zeig den Sourcecode, also bei mir verändert sich garnix wenn ichs verschiebe..
-/// -

[ASTERIX]

Windesigner

  • »[ASTERIX]« ist männlich
  • »[ASTERIX]« ist der Autor dieses Themas

Beiträge: 1 553

Betriebssystem(e): Windows Vista

Sprache(n): Deutsch, Englisch, Französisch & [HTML, CSS, JS, PHP, VisualBasic, Delphi, C++]

Wohnort: Schweiz

Beruf: Schule

  • Nachricht senden

16

Sonntag, 8. April 2007, 11:29

Entschuldigung, ich kann programmieren, aber die meisten deiner Begriffe verstehe ich nicht. ;) Den normalen Code in der Index und die style.css habe ich mal in ein gezipptes verzeichniss gepackt, wenn du das meinst.
»[ASTERIX]« hat folgende Datei angehängt:

____[asterix]_____

gucky

Winhelfer

  • »gucky« ist männlich

Beiträge: 3 882

Wohnort: nähe Lübeck

  • Nachricht senden

17

Sonntag, 8. April 2007, 11:43

Wollte eigentlich den puren HTML Code den dir der Browser ausgibt ;)

Aber egal ich schau mal so rein.

Äh also wenn ich es bei mir compiliere (also in HTML umwandel) kommt nur murks raus, und genau diese Seite läuft bei dir?

Kann es sein das du quasi die Blogeinträge durch include einfügst? Und immerden Namen als ID verwendest? Falls ja musst du unten über ne Schleife auch alle IDs angeben und nicht nur die letzte. Ausserdem würd ich sowas eh über MySQL machen oder hab ich dich falsch verstanden?

Ich glaube wenn du das einmal in deinem Browser öffnest und mir den Quellcode kopierst versteh ich das viel eher.

EDIT: blöden Tippfehler korigiert
-/// -

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »gucky« (8. April 2007, 11:45)

[ASTERIX]

Windesigner

  • »[ASTERIX]« ist männlich
  • »[ASTERIX]« ist der Autor dieses Themas

Beiträge: 1 553

Betriebssystem(e): Windows Vista

Sprache(n): Deutsch, Englisch, Französisch & [HTML, CSS, JS, PHP, VisualBasic, Delphi, C++]

Wohnort: Schweiz

Beruf: Schule

  • Nachricht senden

18

Sonntag, 8. April 2007, 19:23

Ja diese Seite läuft bei mir...
Ach ja ich weis warum das bei dir nicht läuft: Die pfade für die Style Datei sind noch falsch(dort habe ich das position:absolute definiert).

Ehm, also es sollten keine Blogeinträge ge includet werden sondern die aktuelle site. Die Variable "$_SESSION["actpg"]" ist also die aktuelle Site die ge includet wird. Damit aber auch mehrere "Fenster" offen sein können habe ich noch den array "$_SESSION["pgs"]" hinzugefügt der alle aktuellen seiten (also alle jemals aufgerufenen actpgs) gespeichert.
Aber ist ja egal...

Auf jeden fall ist hier der fertige Quelltext der mir der Browser ausgibt.

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

<html>
<head>
<meta name="author" content="André Albert Rösti ([ASTERIX])">
<meta name="description" content="Das Portal für PC-Interessierte. Mit Tweaks, Tutorials, Grossen News Artikeln, Software-Tests und Talk- Forum oder Chat für User.">
<meta name="organization" content="Andres-Homepage.ch">
<meta name="keywords" content="PC, Personal Computer, Comupter, Programme, Informatik, IT, Informations Technelogie, World Wide Web, WWW, Internet, PC-Portal, PC Portal, Personal Computer Portal, Computer Portal, Portal, Tweaks, Tipps und Tricks, Tutorials, Schritt für Schritt Anleitungen, Software, Software-Tests, Software Tests, Tests, Talk, Talk-Forum, Forum, Talk Forum, Talk-Chat, Chat, Talk Chat">
<meta name="language" content="de">
<link rel="stylesheet" type="text/css" href="DATA/STYLE/style.css">
<title>Winportal.ch - Das Portal für PC-Interessierte</title>
<LINK REL="SHORTCUT ICON" HREF="DATA/STYLE/favicon.ico"> 
</head>
<body>
<script type="text/javascript" src="DATA/wz_dragdrop/wz_dragdrop.js"></script>
<div class="header">
<div>
<img src="DATA/STYLE/logo.png" class="headlogo">
<font id="headfont">Das Portal für PC-Interessierte.<br>
<marquee scrollamount="3" class="newmarquee">Dies ist nur ein Test. Hoffentlich sieht man diesen Text durch den Bildschirm "fliegen".</marquee>
</font>
</img>
</div>
</div>
<div width="100%">
<div class="navi">
<img src="DATA/STYLE/navigation.png" class="topico">
<font id="navfont"><a href="index.php">Home</a></font>
</img>
</div><br>
<div class="container">
<div class="left" style="float:left">
<div class="lefttitle">SIDEBAR</div>
<br>Deine IP ist 127.0.0.1.
<br>Du bist hier: home.php</br>
Hallo, .<form action="index.php?actpg=registrieren" method="post">
<input type="text" value="Username" name="user" class="navloggon"></input>
<input type="text" value="Passwort" name="pasw" class="navloggon"></input>
<input type="submit" value="Anmelden" class="navloggon"></input>
</form>
<form action="SITES/registrieren.php" method="post">
<input type="Submit" value="Registrieren" class="navloggon"></input>
</form>
Aktuell Geöffnete Seiten:<br>
Home.php<br></div>
<div id="page2">
<div id="Home.php" style="position:absolute">
<div id="pagetitle">
Home</div>
<div id="pageHome.php"><html>
<h1>Hallo, das ist eine Testseite!</h1>
<font>Hallihallo, das ist einen Test der Website.</font><br>
<font id="quote">Hallo das ist ein test des Zitats.</font><br>
<a href="index.php">Das ist ein Testlink</a>
<ul>
<li>Test</li>
<li>der</li>
<li>Auflistung.</li>
</ul>
</html><br><div class="footer"><center><!-- Sitesuche von Live Search-->
<form method="get"      action="http://search.live.com/results.aspx"> 
<input type="hidden" name="cp"      value="1252"/> 
<input type="hidden" name="FORM" value="FREESS"/><table bgcolor="#FFFFFF">
<tr><td><a href="http://search.live.com/">
<img src="http://search.live.com/s/affillogoLive.gif"      border="0" ALT="Live Search"/>
</a></td><td><input type="text" name="q" size="30" />
<input type="submit" value="Website durchsuchen"/><input type="hidden" name="q1"      value="site:www.winportal.ch"/>
</td></tr></table></form><!-- Sitesuche von Live Search --></center></div></div></div>
</div>
</div>
</div>

<script type="text/javascript">
<!--
SET_DHTML("Home.php"+TRANSPARENT+CURSOR_MOVE,"pageHome.php"+NO_DRAG+TRANSPARENT);
//-->
</script>
</body>
</html>


PS: Ich rufe die Seite (da sie PHP ist) per Virtuellen Webserver, Omni, auf. Aber das sollte ja keinen einfluss haben.

[EDIT]
Jetzt funktionierts wieder. War wohl ein problem des Browsers.

____[asterix]_____

[ASTERIX]

Windesigner

  • »[ASTERIX]« ist männlich
  • »[ASTERIX]« ist der Autor dieses Themas

Beiträge: 1 553

Betriebssystem(e): Windows Vista

Sprache(n): Deutsch, Englisch, Französisch & [HTML, CSS, JS, PHP, VisualBasic, Delphi, C++]

Wohnort: Schweiz

Beruf: Schule

  • Nachricht senden

19

Montag, 9. April 2007, 12:07

Position des Fensters bestimmen

Jetzt funktioniert ja eigentlich alles. Jedoch möchte ich jetzt noch fragen wie ich die Position der Div's bestimmen kann(oder soll ich einen neuen Thread machen? Dann sagts mir.).
Ich möchte das beim öffnen eines neuen "Fensters" dieses sofort an der Position des letzten ist(oder vielleicht so 20px darunter).
Geht/Wie geht das?

Im Anhang ist noch der Screen davon wie es aussieht wenn ein neues Fenster geöffnet wird.
»[ASTERIX]« hat folgendes Bild angehängt:
  • 2007-04-09_120559.png

____[asterix]_____

aargau

Moderator

  • »aargau« ist männlich

Beiträge: 3 677

Betriebssystem(e): Windows XP Pro, Windows 7 Ultimate, Windows Server 2003, [Linux]

Sprache(n): Schwiizerdütsch, Deutsch, Englisch

Wohnort: Schweiz - Aargau - Stein

Beruf: Informatiker

  • Nachricht senden

20

Montag, 9. April 2007, 12:10

Dann müsstest du irgend wie die Div Position an das neue Fenster geben... z.B. per POST oder GET im PHP dann müesste das gehen. Frag mich aber nicht wie genau :)
Gruss
Aargau
Mein Blog | PartyZeit.ch | MarcoVolt.ch
  • 1
  • 2