Du bist nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: HTML, CSS und PHP Forum - HTML Tutorial. Falls dies dein erster Besuch auf dieser Seite ist, lies bitte die Hilfe durch. Dort wird dir die Bedienung dieser Seite näher erläutert. Darüber hinaus solltest du dich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutze das Registrierungsformular, um dich zu registrieren oder informiere dich ausführlich über den Registrierungsvorgang. Falls du dich bereits zu einem früheren Zeitpunkt registriert hast, kannst du dich hier anmelden.

Yamram

Sonderfall

  • »Yamram« ist der Autor dieses Themas

Beiträge: 1 275

Wohnort: C:\Users\Yamram\Desktop\Papierkorb.ink

Beruf: professioneller Kickboxer

  • Private Nachricht senden

1

Samstag, 21. Januar 2012, 15:54

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.

drPHIP132

Web-Profi

Beiträge: 1 204

Wohnort: Sachsen, im Erzgebirge

  • Private Nachricht senden

2

Samstag, 21. Januar 2012, 16:00

Re: DIV verschieben?!

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?

Basiii

Wachhund

Beiträge: 1 594

Wohnort: Schleswig Holstein

Beruf: Freiberuflich

  • Private Nachricht senden

3

Samstag, 21. Januar 2012, 16:16

Re: DIV verschieben?!

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:

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!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>&Uuml;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>

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Basiii« (12. Februar 2013, 01:05)


Yamram

Sonderfall

  • »Yamram« ist der Autor dieses Themas

Beiträge: 1 275

Wohnort: C:\Users\Yamram\Desktop\Papierkorb.ink

Beruf: professioneller Kickboxer

  • Private Nachricht senden

4

Samstag, 21. Januar 2012, 16:19

Re: DIV verschieben?!

@drPHIP132: Danke für die Hilfe :)))))

@Basiii: Perfekt, hätte nicht gedacht, dass das so einfach geht ;) Also sowas nennt man DragBox oder?

Basiii

Wachhund

Beiträge: 1 594

Wohnort: Schleswig Holstein

Beruf: Freiberuflich

  • Private Nachricht senden

5

Samstag, 21. Januar 2012, 16:21

Re: DIV verschieben?!

Nennen kannst du das Ganze wie du willst, aber ich finde DragBox logisch, da es eine verschiebbare (dragable) Box ist 8)

Yamram

Sonderfall

  • »Yamram« ist der Autor dieses Themas

Beiträge: 1 275

Wohnort: C:\Users\Yamram\Desktop\Papierkorb.ink

Beruf: professioneller Kickboxer

  • Private Nachricht senden

6

Samstag, 21. Januar 2012, 16:34

Re: DIV verschieben?!

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?!

7

Samstag, 21. Januar 2012, 19:42

Re: DIV verschieben?!

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.

Yamram

Sonderfall

  • »Yamram« ist der Autor dieses Themas

Beiträge: 1 275

Wohnort: C:\Users\Yamram\Desktop\Papierkorb.ink

Beruf: professioneller Kickboxer

  • Private Nachricht senden

8

Samstag, 21. Januar 2012, 19:48

Re: DIV verschieben?!

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.

9

Samstag, 21. Januar 2012, 19:57

Re: DIV verschieben?!

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.

Basiii

Wachhund

Beiträge: 1 594

Wohnort: Schleswig Holstein

Beruf: Freiberuflich

  • Private Nachricht senden

10

Samstag, 21. Januar 2012, 20:18

Re: DIV verschieben?!

Wo liegt das Problem?

Quellcode

1
2
3
4
5
6
7
8
9
10
11
  <div id="dragBox" onmousedown="dragStart(this);">
    <h3>&Uuml;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();

Yamram

Sonderfall

  • »Yamram« ist der Autor dieses Themas

Beiträge: 1 275

Wohnort: C:\Users\Yamram\Desktop\Papierkorb.ink

Beruf: professioneller Kickboxer

  • Private Nachricht senden

11

Samstag, 21. Januar 2012, 21:09

Re: DIV verschieben?!

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)

Yamram

Sonderfall

  • »Yamram« ist der Autor dieses Themas

Beiträge: 1 275

Wohnort: C:\Users\Yamram\Desktop\Papierkorb.ink

Beruf: professioneller Kickboxer

  • Private Nachricht senden

12

Samstag, 28. Januar 2012, 20:48

Re: DIV verschieben?!

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

drPHIP132

Web-Profi

Beiträge: 1 204

Wohnort: Sachsen, im Erzgebirge

  • Private Nachricht senden

13

Samstag, 28. Januar 2012, 20:56

Re: DIV verschieben?!

du arbeitest mit <h3> ?

css -->

Quellcode

1
2
3
4
h3:hover
{
    cursor: default;
}

Yamram

Sonderfall

  • »Yamram« ist der Autor dieses Themas

Beiträge: 1 275

Wohnort: C:\Users\Yamram\Desktop\Papierkorb.ink

Beruf: professioneller Kickboxer

  • Private Nachricht senden

14

Samstag, 28. Januar 2012, 20:58

Re: DIV verschieben?!

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

Quellcode

1
2
3
h3 {
  cursor: move;
}


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

15

Mittwoch, 28. März 2012, 19:37

Versuch's mal mit

Quellcode

1
 <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'.

Basiii

Wachhund

Beiträge: 1 594

Wohnort: Schleswig Holstein

Beruf: Freiberuflich

  • Private Nachricht senden

16

Mittwoch, 28. März 2012, 19:48

Threadpirat, aber Latte..

Also per CSS den Cursor "move" zuweisen funktioniert einwandfrei, keine Ahnung was da ein Problem darstellt.
Du hast Fragen zum Board, Kritik, Lob, Anregungen oder dich stört etwas? Einfach eine private Nachricht senden.
<(o.o)> I always know what I du!

17

Mittwoch, 28. März 2012, 19:56

Aha, ist wohl browserabhängig. Unter FF funktioniert es, unter Chromium nicht.

Basiii

Wachhund

Beiträge: 1 594

Wohnort: Schleswig Holstein

Beruf: Freiberuflich

  • Private Nachricht senden

18

Mittwoch, 28. März 2012, 20:00

Den Benutzer interessiert das sowieso nicht ;)
Du hast Fragen zum Board, Kritik, Lob, Anregungen oder dich stört etwas? Einfach eine private Nachricht senden.
<(o.o)> I always know what I du!

EdgaroEddy

ist noch ganz neu

Beiträge: 1

Wohnort: Graz ( Österreich)

  • Private Nachricht senden

19

Samstag, 23. März 2013, 21:07

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