Przeciąganie elementów

Wskazówka przedstawia skrypt, za pomocą którego można na stronie, przeciągać różne elementy graficzne i nie tylko. Tekst powstał na podstawie artykułu z KS-Eksperta.

Główny kod skryptu:

<script type="text/javascript">

var MyOB,Mzindex=0

function Inicjuj(ile)
{
   for(var i=1; i<=ile; i++) eval('new MyDragDrop("warstwa'+i+'")\r\n')
 
   document.onmousemove=DragFun
   document.onmouseup=DropFun
}

function DragFun(e)  //przesunięcie
{
  e=e||event
  if(MyOB)  //jesli mamy obiekt
    {
       MyOB.left=(e.pageX?e.pageX:event.clientX+document.body.scrollLeft)-MyOB.X
       MyOB.top=(e.pageY?e.pageY:event.clientY+document.body.scrollTop)-MyOB.Y
    }
    return false;
}

function DropFun()  //puszczenie myszki
{
   MyOB=null  //wybrany obiekt - pusty
}

function MyDragDrop(w)
{
   this.id=document.getElementById(w)
   this.id.onmousedown=CDown
   
   function CDown(e)
   {
     MyOB=this.style
     MyOB.zIndex=++Mzindex
     e=e||event
 
     //w X i Y zapamiętujemy pozycję kursora względem początku WARSTWY
     MyOB.X=e.pageX?e.pageX-(this.offsetLeft):event.offsetX
     MyOB.Y=e.pageY?e.pageY-(this.offsetTop):event.offsetY
     return false
   }
}

onload = function()
{
  Inicjuj(1); // ilość warstw, na których ma działać skrypt
}

</script>

Elementom `<div>` należy nadać kolejne wartości atrybutu Id: "warstwa1", "warstwa2", itd.