Objekte verschieben
    
 Home • DHTML • drag + drop Lesezeichen

 Objekte verschieben  Beispiel Lesezeichen

Objekte mit festgehaltener Maustaste verschieben. Das müssen nicht immer nur Spielereien sein. Hier als Beispiel einer Anwendung ein Lesezeichen / ein Marker.
Drag and Drop  (ziehen und fallenlassen)

Objekte mit festgehaltener Maustaste verschieben.
Ein umfangreicheres Beispiel finden Sie unter Drag - Drop

Im Beispiel wird ein Objekt (Grafik) mit festgehaltener Maustaste verschoben. Das Lesezeichen soll als Marker für Textpassagen eingesetzt werden. Weitere Grafiken finden Sie weiter unten.

Lesezeichen

Klicken Sie das Lesezeichen an und verschieben es mit festgehaltener linker Maustaste.


   Aufwand:

  • JavaScript in den Head-Bereich eintragen
  • CSS-Block in den Head-Bereich eintragen
  • Image im Body-Bereich notieren
  • für das Image eine CSS-Klasse eintragen


   Script im Head 

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


   Grafik im Body

Egal welche Grafik 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="lesezeichen01.gif" width="81" height="57" border="0">



   Grafiken (81 x 57 Pixel):

Diese selbst erstellten Grafiken dürfen Sie frei verwenden (rechtklicken + speichern). Natürlich eignet sich jede andere Pfeilgrafik auch als Lesezeichen oder Sie entwerfen ihr eigenes.



 lesezeichen01.gif

 lesezeichen02.gif

 lesezeichen03.gif

 lesezeichen04.gif


 lesezeichen05.gif

 lesezeichen06.gif

 lesezeichen07.gif

 lesezeichen08.gif


Als Alternative wäre auch eine animierte Grafik denkbar. Diese Animation stammt aus Wikimedia-Commons:

birdleft.gif
(50 x 42 Pixel)






NACH OBEN