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
falsewird 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
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:
// 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
20714 mal gelesen.
32 Comments
Einen Kommentar hinterlassen »
Kommentare
« Zurück 1 2-
21.
von schlaubi666
-
-
22.
von Struppi
-
-
23.
von schlaubi666
-
-
24.
von bioweg
-
-
25.
von Struppi
-
-
26.
von Aaron K.
-
-
27.
von Sammy
-
-
28.
von welle
-
-
29.
von Struppi
-
-
30.
von welle
-
-
31.
von Sebastian
-
-
32.
von Struppi
-
« Zurück 1 2Freitag 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.
Freitag 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.
Freitag 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 ?
Sonntag 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
Mittwoch 21.Juli 2010: 09:05
Die Möglichkeit gibt es. Die einfachste wäre, diese Werte in einem Cookie zu speichern.
Samstag 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)
Donnerstag 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.
Dienstag 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.
Dienstag 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?
Freitag 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.
Dienstag 17.Januar 2012: 10:18
Hallo,
da ich neu in Javascript bin, ist einiges davon noch sehr unverständlich. Habe Grundlagen in PHP, Java und diversen anderen Sprachen.
Das Script sieht wirklich sehr interessant aus und da ich derzeit ein Projekt vor der Brust habe wo es um Ticketsysteme geht, wäre so etwas natürlich super. Ein Admin könnte die verschiedenen offenen Tickets per Drag an Drop aus dem Feld "offene Tickets" verschiedene Felder zuweisen, welche unterschieldichen Mitarbeitern entsprechen. Ich denke zumindest das soetwas fast möglich mit dem Script wäre^^.
An dieser Stelle:
var tmp = new DragObject(o, o.childNodes[0] )
habe ich ein Bömisches Dorf gefunden^^
Also laut Quelltext kommen die o's von document.getElementById('dragObject') und dragObject ist die id von einer div in der sich die Überschrift Titel, ein Bild und ein Absatz befindet.
Mit childnodes erhällt man den titel für das Dragobjekt. Aber an fordersterstelle übergibt man das ganze von DragObject. Müsste der Title nicht zweimal auftauchen?
Und noch eine Frage, auch wenn man jetzt denken oh man anfänger. Ich kann doch in mein script ein ondoubleclick einfügen oder. So könnte ich mir nähere Infos zum Ticket geben lassen^^. Wäre super wenn das alles so funktoniert wie ich mir das vorstelle.
Freundliche Grüße
Sebastian
Mittwoch 18.Januar 2012: 23:23
Es müßte eigentlich problemlos möglich sein, einen anderen Event einzubauen.
Die Parameter für den Konstruktor sind, einmal das Objekt das bewegt wird beim draggen und dann optional ein Element auf dem der Dragvorgang gestartet wird. Wie z.b. eine Titelzeile in einem Fenster. Das childNodes Objekt habe ich hier benutzt, weil das Element (die Überschrift) das erste Element ist. Aber es kann auch stattdessen mit getElementById() oder einer ähnlichne Funktion das Element übergeben werden.
Einen Kommentar hinterlassen