 Objekte verschieben
Objekte mit festgehaltener Maustaste verschieben. Das müssen nicht immer Grafiken sein. Die Position eines Notizfensters oder eine kleines Menü könnte man frei positionieren. Hier habe ich mit dieser Technik ein Puzzle hergestellt.
|
|
drag and drop - ziehen und fallenlassen
Im Beispiel werden Grafiken mit festgehaltener Maustaste verschoben. Zur Anschauung gibt es hier einige simple Beispiele. Öffnen Sie für eine weitere Demo einer Anwendung das Beispiel im PopUpWindow.
Der Aufwand für den Webmaster ist recht gering: Das Javascript wird im Head-Bereich notiert. Für die zu bewegende Grafik wird im <img>-Tag ein class-Attribut hinzugefügt, schon können Sie den Vogel verschieben. |
|
Weitere Beispiele:
 Beispiel-02 
Beispiel-03
Beispiel-04
Ein Anwendungsbeispiel finden Sie unter  Lesezeichen
Wählen sie einen Gegenstand! Mit der festgehaltenen linken Maustaste verschieben.
50 ways to leave your lover
50 Wege deinen Lover los zu werden.
Paul Simon: 50 ways to leave your lover
Vorschlag für den 51. Weg: "Gib ihr den Föhn, Tön"
für nicht-Rheinländer: Tön = Kurzform von 'Tönes'
[abgeleitet von Antonius]
Beschreibung
Für die 'beweglichen' Grafiken dieser Seite wurd in den IMG-Tags lediglich ein class-Attribut mit dem Wert "dragme" eingetragen.
Beispiel der Notierung:
<img src="puzzle01.gif" width="123" height="110" border="0" class="dragme">
Der Vorteil der neuen Script-Version ist: Nun können Sie beliebig viele 'bewegliche' Grafiken in Ihrem HTML-Dokument notieren, die immer das gleiche CSS-Attribut bekommen. (Im alten Script musste man für jedes Image einen eigenen Layer notieren.)
Aufwand
- JavaScript in den Head-Bereich eintragen
- CSS-Block in den Head-Bereich eintragen
- Images im Body-Bereich notieren
- für jedes Image CSS-Klasse eintragen
Bitte entnehmen Sie den gesamten Quellcode für dieses Beispiel der Textdatei (Link oben im Kopfbereich). Dort können Sie ebenfalls eine Demo- bzw. eine Beispieldatei abrufen. Infos und Erklärungen zum 'Einbauen' von JavaScript  JavaScript Menü 01
aktives Beispiel Bildrätsel - wer ist das?
Script im Head
(vollständiger Quelltext als Textdatei im Kopfbereich unter Scriptcode)
<script type="text/javascript" language="JavaScript">
<!-- Begin
// Created by: elouai.com
// mod: W. jansen
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var verschieben=false;
var x,y;
var dobj;
function movemouse(e)
{
if (verschieben)
{
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}
function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";
while (fobj.tagName != topelement && fobj.className != "dragme")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
if (fobj.className=="dragme")
{
verschieben = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("verschieben=false");
// End -->
</script>
CSS im Head
<style type="text/css">
<!--
.dragme{position:relative;}
-->
</style>
im Body
a class-Attribut für 'bewegbare' Grafiken
Egal welche und wie viele Grafik(en) Sie einbinden möchten, Sie notieren erst einmal ein ganz normales <img>-Tag mit den üblichen HTML-Anweisungen. In dieses HTML-Tag wird dann ein zusätzliches Attribut für die CSS-Klasse eingetragen.
<img class="dragme" src="dateiname.gif" width="150" height="150" border="0">
Dieses Attribut tragen Sie für jedes Objekt ein, die Sie mit der Maus ziehen / bewegen möchten.
b class-Attribut für 'bewegbare' Texte
<div class="dragme">
Texte
</div>
| 
Home • DHTML • drag + drop
DOWNLOAD
