Objekte verschieben
    
WWW.WEB-TOOLBOX.NET
ZURÜCK SITEMAP  

 Objekte verschieben  Beispiel Lesezeichen

Objekte mit festgehaltener Maustaste verschieben. Hier als Beispiel einer Anwendung ein Lesezeichen.

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