Javascript ist Toll!

14. Februar 2007 - 13:11

Drag & Drop 2

Ich hatte ja schon ein einfaches Drag & Drop Skript hier vorgestellt, dass aber nicht allen Anforderung gerecht wird. Ich brauchte ein Skript, mit dem man Teile innerhalb eines Bereiches, dragbar macht. Also das was man von normalen Fenstern kennt, das ganze Fenster läßt sich durch ziehen am Titel bewegen. Ausserdem gab es noch ein kleines Opera Problem, weil der beim Draggen den Text markierte.

Benutzung

Das Skript wird als externe Javascript Datei eingebunden. Zum Beipsiel auf die übliche Weise:
<script type="text/javascript" src="dragObject.js"></script>.

Ein Objekt wird dann dragbar gemacht, indem nach dem Laden des Elements (entweder im HTML Quellcode dahinter oder in einem onload Handler) mit:
new DragObject( object1, object2) ein Dragbares Objekt erzeugt wird.
Konkret sieht ein Beispiel so aus:

<div id="test">
<div id="titel">Titel </div>
Box.
</div>

<script type="text/javascript" src="dragObject.js"></script>
<script type="text/javascript">
window.onload = function()
{
    new DragObject( document.getElementById('test'), document.getElementById('titel')  );
};
</script>

Methoden

ini(objekt [, objekt])
Der erste Parameter ist das Objekt das verschoben werden soll. Der zweite optionale Parameter, ist das Objekt mit dem das erste verschoben werden kann, z.b. die Titelzeile eines Fensters. Ist dieser undefiniert, dann wird das Obejkt im ersten Parameter als zum Draggen benutzt.
setPos(top, left)
Das Element positionieren.
getPos()
Rückgabe der Positionen, als ein Array mit den Werten: [top, left, height, width]
obj()
Das Dragobjekt

Events

onstart(e)
Der Event, der beim klick auf ein Drag&Drop Objekt gefeuert wird.
onmove(e, neu_top, neu_left)
Event, der beim bewegen des Elements gefeuert wird. Ist der Rückgabewert false wird die Bewegung zur neuen Position nicht ausgeführt
ondrop(e)
Event der beim droppen des Elements gefeuert wird. Ist der Rückgabewert false, wird das Element wieder an die ursprüngliche Position gesetzt.

Donwload

dragObject.js

Beispiel

In dieser Box ist ein Element, dass nur innerhalb der Box bewegt werden kann. Wird es nach ausserhalb bewegt, färbt sich der Hintergrund der Box rot und beim Droppen wird das Element wieder an die alte Position gesetzt.

Der Code dafür sieht folgendermaßen aus:

javascript
// erzeugen des DragObjektes.
var tmp = new DragObject(o, o.childNodes[0] )
 
// Der drag Event
tmp.ondrag = function(e, top, left){
	var drag_objekt = this.getPos();
 
	// box_top/_left/_bottom/_right 
        // sind berechnete Werte der äußeren box
	var is_in = (left >; box_left) &&
		(top > box_top) &&
		(drag_objekt[2] + top < box_bottom) &&
		(drag_objekt[3] + left < box_right);
		box.style.backgroundColor = is_in ? 'white' : 'red';
};
// Drop Event
tmp.ondrop = function(e){
	box.style.backgroundColor = 'white';
	var drag_objekt = this.getPos();
	var is_in = (drag_objekt[1] > box_left) &&
	(drag_objekt[0] > box_top) &&
	(drag_objekt[2] + drag_objekt[0] < box_bottom) &&
	(drag_objekt[3] + drag_objekt[1] < box_right)
 
	// Wenn is_in false ist, 
	//wird das DragObjekt wieder an die Ausgangsposition zurück gesetzt
	return is_in; 
};

So sieht's aus

Titel

Text unter'm Foto.

Ähnliche Artikel

  • 22. Juni 2012 -- Tween(2) (0)

    Die Technik um mit Javascript eine Bewegung zu animieren hatte ich in einem älteren Artikel bereits beschrieben und kündigte dort eine Fortsetzung an. Doch das Skript, was ich dort verwendet habe, hat...

  • 15. November 2011 -- Round Robin Berechnung mit Javascript (0)

    Mit dem Round Robin Algorithmus können Spielpaarungen in einem rundenbasierten Turnier berechnet werden. Das sind z.b. die Turniere vieler Ballsportarten. Das Besondere an diesem Algorithmus ist es, dass...

  • 3. September 2010 -- Tweening – Effekte mit Javascript (4)

    Tweening und Transition sind zwei Begriffe aus der Welt der Computeranimation. Heute möchte ich eine Klasse zeigen, wie diese Techniken auch bei Javascript Animationen Verwendung finden. Das Prinzip...

Comments (38)
0 mal gelesen.

38 Kommentare

Leave a comment »

Seiten: 1 2

1. Kommentar von: Kalle_B
22. März 2007: 23:50

Klasse tool.

Da ich auf meiner Seite schon Grafiken mit id hatte, konnte ich die alle dragfähig machen. So weit zur Spielerei.

Interessant wäre eine Anwendung, mit der man per drag & drop einfach Datensätze (oder ganze Tabellen) in die Nackup- Datenbank verschiebt.

Mal sehen, wie man dropen kann.

Lieben Gruß, Kalle_B

2. Kommentar von: Kalle_B
18. April 2007: 14:45

Hallo,

habe eben im SelfHTML- Forum die Frage gestellt, warum meine Objekte beim Initialisieren ihre Position verlassen.

Mache die Initialisierung bewusst 3 sec nach onLoad, damit man es sehen kann.

http://forum.de.selfhtml.org/?t=150741&m=979860

Lieben Gruß, Kalle

3. Kommentar von: l8a
20. Juni 2007: 10:57

Hallo,

Klasse script!

Aber wie kann ich zusätzlich noch erreichen das die Gerade verschobenen Elemente ‚on top‘ bleiben (z-index)?

Gruß l8a

4. Kommentar von: Struppi
20. Juni 2007: 11:33

Das sollte eigentlich so sein, es denn du hast Elemente mit einem z-index höher als 999

5. Kommentar von: l8a
20. Juni 2007: 14:47

Hallo.

Nein habe ich nicht. Wenn ich es dragge wird der z-index auf 999 gesetzt, sobald ich es jedoch drope wird er auf 0 gesetzt und der layer wird von dem anderem layer, über den ich ihn dropte, der später kreiert wurde überlagert.

6. Kommentar von: Ernesto
22. August 2008: 20:32

Hallo Struppi,
etwas verstehe ich immer noch nicht an dem schönen Programm:
1.) Wozu dienen die Funktionen:
this.ondrop = function() {return true;};
this.ondrag = function() {return true;};
this.onstart = function() {return true;};
2.) Wieso kann eine Funktion, die ohne Par.
definiert wird, s.o., mit mehreren Par.
aufgerufen werden?
this.ondrag(e, new_top, new_left)
3.) Es wird in einer Abfrage (Sonderfall)
programmiert:
if(!dragObject) return end_drag(e);
Die Funktion end_drag(e) ist in der
1.Version vorhanden, aber hier fehlt sie.

Viele Grüße Ernesto 🙂

7. Kommentar von: Struppi
23. August 2008: 12:06

Ich hab den Artikel mal entsprechend erweitert, vielleicht hilft’s ja deine Fragen zu beantworten.

8. Kommentar von: Ernesto
27. August 2008: 09:43

Hallo Struppi,
entschuldige, daß ich erst jetzt antworte.
Das Script ist super !!! Ich habe bei meinen
Problemen Deine Anregungen und Hilfen gut ge-
brauchen können. Ich habe nicht Dein Script
dazu geladen, weil in meiner Situation noch
andere Umstände eine Rolle spielen: Ich soll
ein Bild u.a. aus einer Übersicht auswählen,
vergrößern, verkleinern, z-Index bestimmen
usw. können. Unter anderem darf ein Bild
nicht aus einem bestimmen Bereich bewegt
werden (siehe oben!). Aber ich habe Deine
Anregungen benutzt, um meine Probleme zu
lösen, mein Script läuft jetzt soweit. 🙂

Vielen Dank nochmal dafür!!!

Zusatzfrage:
Kann man ein Bild mit Javascript auch drehen?
Man müßte dann alle Pixel intern verschieben?
Ich denke, es ist auf jeden Fall sehr auf-
wendig.

Viele Grüße
Ernesto

9. Kommentar von: Struppi
27. August 2008: 09:48

Nein, das kann man mit JS nicht.

10. Kommentar von: Dietmar
28. September 2008: 18:02

schöne spielerei 😉
vielleicht kann man das mal irgendwo einsetzten

11. Kommentar von: Borsti93
4. Juni 2009: 19:46

Hallo,

das Script ist wirklich wunderbar.
Ich bräuchte es nur so, dass man 2 Boxen hat, die man bewegt.
Was müsste man da verändern?

12. Kommentar von: Struppi
7. Juni 2009: 00:28

Du musst einfach die zweite Box mit new DragObject( …); initialisieren

13. Kommentar von: Borsti93
8. Juni 2009: 18:34

Ich habe jetzt unter die Variable var obj = … folgenden Code ergänzt (der Code in den Eckigen Klammer war ja schon):

var obj2 = document.getElementById(‚dragObjekt2‘);

[ var tmp = new DragObject(obj, obj.childNodes[0] ); ]
var tmp = new DragObject(obj2, obj2.childNodes[0] );

Damit kann ich jetzt beide Boxen bewegen, aber es wir leider nicht die Funktion ausgeführt, dass beide Boxen daraufhin überprüft werden, ob sie nun im Feld sind oder nicht, das geschieht nur bei der ersten.

14. Kommentar von: Struppi
8. Juni 2009: 18:42

Die Eventhandler in dem Beispiel oben, musst du jedem Objekt zuweisen

var tmp = new DragObject(obj, obj.childNodes[0] );
var tmp2 = new DragObject(obj2, obj2.childNodes[0] );
tmp.ondrag = tmp2.ondrag = function(e, top, left){ ….}

15. Kommentar von: Borsti93
8. Juni 2009: 20:26

Ja, jetzt klappt es besser, aber die Funktion tmp.ondrag wird für das zweite Element nicht ausgeführt.

Ich habe, um einen besseren Überblick zu behalten, mal alle Funktionen gedoppelt, d.h. für ondrag() hab ich einmal tmp.ondrag und tmp2.ondrag bei den anderen auch.

Es macht aber gar keinen Unterschied, ob ich nun tmp2.ondrag im Script habe, oder es ausklammere…

Wenn du dir mal die Dateien anschauen willst: [Link entfernt]

Trotzdem schon mal vielen Dank! 😀

16. Kommentar von: Struppi
8. Juni 2009: 23:00

Der Link bringt mir nichts, zumal nicht bei einem offensichtlich kostenpflichtigen Filesharing Angebot, das zu dem meine Fenstergröße ändert, das hab ich gleich wieder zu gemacht. Ich werde den Link entfernen

17. Kommentar von: Fabian
11. Juli 2009: 22:13

Wenn du alles doublest, gehts!

//var Drag = DragObject;
function getPos(o) {
for(var top = o.offsetTop, left = o.offsetLeft; o = o.offsetParent; top += o.offsetTop, left += o.offsetLeft) {}
return [top, left];
}
window.onload = function()
{
var box = document.getElementById(‚test‘);
var box_top = getPos(box)[0];
var box_left = getPos(box)[1];
var box_bottom = box.offsetHeight + box_top;
var box_right = box.offsetWidth + box_left;

var obj = document.getElementById(‚dragObjekt‘);
var obj2 = document.getElementById(‚dragObjekt2‘);

var tmp = new DragObject(obj, obj.childNodes[0] );
var tmp2 = new DragObject(obj2, obj2.childNodes[0] );

tmp.ondrag = function(e, top, left){
var drag_objekt = this.getPos();
var is_in = (left > box_left) &&
(top > box_top) &&
(drag_objekt[2] + top < box_bottom) &&
(drag_objekt[3] + left box_left) &&
(top > box_top) &&
(drag_objekt[2] + top < box_bottom) &&
(drag_objekt[3] + left box_left) &&
(drag_objekt[0] > box_top) &&
(drag_objekt[2] + drag_objekt[0] < box_bottom) &&
(drag_objekt[3] + drag_objekt[1] box_left) &&
(drag_objekt[0] > box_top) &&
(drag_objekt[2] + drag_objekt[0] < box_bottom) &&
(drag_objekt[3] + drag_objekt[1] < box_right);

return is_in;
};
};

18. Kommentar von: Fabian
11. Juli 2009: 22:15

Also so:

//var Drag = DragObject;
function getPos(o) {
	for(var top = o.offsetTop, left = o.offsetLeft; o = o.offsetParent; top += o.offsetTop, left += o.offsetLeft) {}
	return [top, left];
}
window.onload = function()
{
	var box = document.getElementById('test');
	var box_top = getPos(box)[0];
	var box_left = getPos(box)[1];
	var box_bottom = box.offsetHeight + box_top;
	var box_right = box.offsetWidth + box_left;
	
	var obj = document.getElementById('dragObjekt');
	var obj2 = document.getElementById('dragObjekt2');

	
	var tmp = new DragObject(obj, obj.childNodes[0] );
	var tmp2 = new DragObject(obj2, obj2.childNodes[0] );
	
	tmp.ondrag =tmp2.ondrag = function(e, top, left){
		var drag_objekt = this.getPos();
		var is_in = (left > box_left) &&
		(top > box_top) && 
		(drag_objekt[2] + top < box_bottom) &&
		(drag_objekt[3] + left  box_left) &&
		(drag_objekt[0] > box_top) &&
		(drag_objekt[2] + drag_objekt[0] < box_bottom) &&
		(drag_objekt[3] + drag_objekt[1] < box_right);
		
		return is_in;
	};

};
19. Kommentar von: schlaubi666
5. November 2009: 20:28

So was habe ich gesucht … Danke

Frage zum Beispiel:

wenn ich deinen #test -div in einen anderen -div packe und den test-div mit css

position:absolute;
left: 100px;
top: 50px;

positioniere

und das dragObjekt auch

#dragObjekt{
position:absolute;
left: 50px;
top: 75px;
border:1px solid black;
}

sieht ja anfangs noch schön aus, aber sobald ich das dragObjekt anklicke verschiebt es sich und der test-div ist auch nicht mehr der „Rahnen“ ( Farbwechsel )…
das liegt bestimmt an „position:absolute; und left: xxx; top:xxx; “

was muß man ändern damit die Koordinaten und der Farbwechsel wieder stimmen ?

Ist die Erklärung schlecht ?

hier liegt das geänderte Bsp.

http://www.creativetextilart.de/test/test.Bilder.bewegen3.htm

20. Kommentar von: Struppi
6. November 2009: 11:02

Das Skript ist bewußt schlank und schnell gehalten, die Funktion zur Positionsermittlung prüft nicht alle Sonderfälle, wie z.b. ineinander verschachtelte absolut positionierte Elemente. Ich hab‘ sie aber mal angepaßt.

21. Kommentar von: schlaubi666
6. November 2009: 12:12

mit start_pos … und so schnell, du bist richtig gut.

was muss noch geändert werden, damit auch der Farbwechsel wie in deinem Bsp. bei mir fkt. ?

Danke für deine Hilfe.

22. Kommentar von: Struppi
6. November 2009: 12:56

Meine Empfehlung: verzichte auf ineinander verschachtelte absolut positionierte Elemente. So ist es zu kompliziert das Element mit JS zu positionieren.

23. Kommentar von: schlaubi666
6. November 2009: 16:01

ich möchte ein solches Layout erzeugen:

http://www.creativetextilart.de/test/tabelle.gif

erst hatte ich Tabellen, die haben aber je nach Inhalt ihre Größe geändert ( trotz fester Höhe/Breite Angaben)
dann habe ich auf div‘ mit css umgestellt, um das Layout umzusetzen. habe ich nur mit position:absolute hin bekommen. In den 400/400 Block in der Mitte soll dann noch der Test von oben.

Gibt es eine andere Mgl. mein gewünschtes Layout ohne position:absolute hinzubekommen und so dein drag/drop mit einbinden zu können ?

24. Kommentar von: bioweg
18. Juli 2010: 14:52

Hallo,

ist wirklich ein tolles Script. Gibt es auch eine Möglichkeit das wenn man das Element verschoben hat, dieses beim nächsten Aufruf oder beim aktualisieren der Seite an der Position erscheint wohin man es verschoben hat?.

Gruß,
bioweg

25. Kommentar von: Struppi
21. Juli 2010: 09:05

Die Möglichkeit gibt es. Die einfachste wäre, diese Werte in einem Cookie zu speichern.

26. Kommentar von: Aaron K.
28. August 2010: 12:03

Werde ich nutzen auf meiner HabboFanseite. Vielleicht eher als Spielerei.
Wobei es auch sinnvoll ist, wenn man viele Boxen hat und den Leuten die Möglichkeit geben möchte diese nach wichtigkeit zu ordnen.

Meine Seite ist hässlich und nutzt kein XHTML… aber sau viel JS (von den netten ToolTips über das hier bis zu alert) 😀

27. Kommentar von: Sammy
27. Oktober 2011: 23:11

Hallo,

ist es möglich, das Drag verhalten automatisch per funktionsaufruf zu starten?

Ich möchte, wenn der User auf einen Knopf drückt, ein img Objekt erstellen welches dann gleich sozusagen am Cursor „klebt“ ohne dass er nochmals drauf klicken muss.

Ansonsten echt tolles Script. Hut ab.

28. Kommentar von: welle
6. Dezember 2011: 23:54

Hallo Struppi,
das Script läuft super, alle Achtung!
Nur ein kleines Problem, welches ich bis jetzt nicht lösen konnte:
bei einem DIV-Element mit css-style „overflow=auto“ lässt es das DragObject nach dem Scrollen
der DIV nicht mehr los.
Das passiert nur beim IE9, bei Firefox nicht.
Habe da schon einiges rumprobiert- leider erfolglos.
Wäre schön, wenn du da eine Idee dazu hättest.

29. Kommentar von: Struppi
20. Dezember 2011: 11:39

Tut mir leid. Da ich mittlerweile keinen IE mehr habe (nur noch auf einem alten Rechner, einen IE 6) kann ich das nicht testen. Gibt es denn eine Fehlermeldung?

30. Kommentar von: welle
6. Januar 2012: 10:39

Nein, keine Fehlermeldung. Es scheint so, dass beim IE die Scroll-Leiste (die ja bei overflow:auto) eingeblendet wird, kein Mouseup-Event empfängt- und auch nicht an das parentNode-Element weiterleitet. Ich werde das Problem wohl so lösen müssen,dass das DragObject-Script die rechten und unteren zwanzig Pixel des Div-Elements nicht mit einbezieht.
Trotzdem danke für die Antwort.

1 2

Leave a comment

Name (required)
Mail (wird nicht angezeigt) (required)
Website

Folgende HTML Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



rats-wonderful
rats-wonderful
rats-wonderful
rats-wonderful