[JavaScript] Div verschieben

Drucken
( 5 Votes )
Hauptkategorie: Programmieren Kategorie: JavaScript
Erstellt am 31.12.2011 Zuletzt aktualisiert am 09.08.2012 Geschrieben von Jonny132
Oftmals sieht man auf neueren Homepages die Möglichkeit Inhalte bzw Container mit der Maus zu verschieben. Dies funktioniert per JavaScript. Ich zeige euch nun an einem Beispiel wie das Grundprinzip solcher 'verschiebereien' funktioniert.

Hier könnt ihr euch schonmal das Ergebnis betrachten.

Erstellen Sie eine neue html Datei und öffnen Sie diese zur Bearbeitung. Fügen Sie der der Datei das Grundkonstrukt einer Html Datei und im Head Bereich einen Script - Tag ein. In diesen Script Tag fügen wir nun JavaScript Funktionen und Variablen ein die wir brauchen um Objekte per Maus verschieben zu können.
HTML - Grundgerüst
1
2
3
4
5
6
7
8
<html>
<head>
<script language="JavaScript" type="text/javascript">
</script>
</head>
<body>
</body>
</html>

 

Zuerst erstellen wir die Globalen Variablen die wir benötigen.

currentObj: Enthält das derzeitige Objekt das verschoben werden soll.
currentObjX: Die X - Koordinate des aktuellen Objekts.
currentObjY: Die Y - Koordinate des aktuellen Objekts.
startX: Die X - Koordinate beim Start des Drag - Vorgangs.
startY: Die Y - Koordinate beim Start des Drag - Vorgangs.

Zusätzlich registrieren wir 2 Events die für die ganze Seite gelten. Das ist erstens das onmousemove - Event das immer geworfen wird, wenn sich die Mauskoordinaten ändern und zweitens das onmouseup welches geworfen wird wenn die Maus losgelassen wird. Wir benennen diese Events doDrag und stopDrag.
Global gehaltene Variablen im Script - Tag
1
2
3
4
5
6
7
8
9
10
11
12
 var currentObj = null;
 var currentObjX = 0;
 var currentObjY = 0;
 
 var startX = 0;
 var startY = 0;
 
 // bool ob aktueller Browser ein IE ist
 var IE = document.all&&!window.opera;
 
 document.onmousemove = doDrag;
 document.onmouseup = stopDrag;

Wie Sie vielleicht sehen fehlt noch ein onmousedown, damit das ganze funktionieren kann, denn woher soll die Funktion ansonsten wissen welches Objekt verschoben werden soll.
Dazu erstellen wir die Funktion startDrag. Dieser übergeben wir das Objekt das verschoben werden soll und setzen die globalen Variablen.
Funktion startDrag
1
2
3
4
5
 function startDrag(obj) {
 currentObj = obj ;
 startX = currentObjX - currentObj.offsetLeft;
 startY = currentObjY - currentObj.offsetTop;
 }

 

Da wir das Event onmousemove des Documents registriert haben und diese auf die Funktion doDrag gelegt haben können wir diese Funktion nun erstellen. Die Funktion wird automatisch aufgerufen sobald sich die Mauskoordinaten ändern. Wir setzen die Koordninaten Variablen je nach verwendetem Browser unterschiedlich.
Danach fragen wir ab ob wir zurzeit ein Objekt zum Verschieben haben und setzen die Koordinaten dieses Objekts neu.
doDrag Funktion
1
2
3
4
5
6
7
8
9
10
 function doDrag(ereignis) {
 
 currentObjX = (IE) ? window.event.clientX : ereignis.pageX;
 currentObjY = (IE) ? window.event.clientY : ereignis.pageY;
 
 if (currentObj != null) {
 currentObj.style.left = (currentObjX - startX) + "px";
 currentObj.style.top = (currentObjY - startY) + "px";
 }
 }

 

In der letzen benötigten Funktion der stopDrag - Funktion setzen wir nurnoch das aktuelle Objekt wieder auf null, da diese Funktion aufgerufen wird, sobald die Maustaste losgelassen wird, also wenn der Dragvorgang stoppen soll.

stopDrag Function
1
2
3
 function stopDrag(ereignis) {
 currentObj = null;
 }

 

Das war der benötigte JavaScript Block, was Sie nun noch benötigen sind ein paar Elemente zum verschieben.

Ich habe zu Testzwecken einfach 3 Divs erstellt die verschiebbar sein sollen, Sie können jedoch auch jedes andere Objekt nehmen. Platzieren Sie diese Objekte in den Body Teil der HTML - Datei.

Body Teil der HTML - Datei
1
2
3
4
5
6
 <div id="div1" style="position:absolute; background-color:red; width:200px;
 height:200px; padding:7px;"
onmousedown="startDrag(this);">
</div> <div id="div2" style="position:absolute; background-color:green; width:200px;
 height:200px; padding:7px;"
onmousedown="startDrag(this);">
</div> <div id="div3" style="position:absolute; background-color:blue; width:200px;
height:200px; padding:7px;"
onmousedown="startDrag(this);">
</div>

 

Diesen Objekten sagen wir, dass falls der Benützer auf sie klickt, das Objekt die startDrag Funktion für dieses Objekt ausführen soll.

Und das wars schon. Und so könnte das im Endeffekt aussehen (Produktivbeispiel):

Div mit der Maus verschieben

    Veröffentlichen Sie ihre Kommentare ...