JavaScript » FAQ

Przeciąganie elementów

  • 2006-11-14 16:14
  • 5 komentarzy
  • 1133 odsłony
  • Oceń ten tekst jako pierwszy
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.

5 komentarzy

ciapek888 2006-11-15 06:08

Działa we wszystkich przeglądarkach jakie mam: Firefox 1.0.1, Konqueror 3.4.0, Mozilla 1.7.5

Coldpeer 2006-11-15 13:55

A ja mam Firefox 2.0 i Operę 9 i nie działa.

jaconon 2006-11-14 17:16

ten kod działa na firefoksie i ie, tylko że mądrzy użytkownicy go ulepszyli. pierwotna wersja działała na tych przeglądarkach. myślę że na operze też by poszła.

Kooba 2006-11-14 16:39

to na czym działa? są jeszcze jakieś przeglądarki? :P

Coldpeer 2006-11-14 16:15

Taka mała uwaga, ten kod nie działa na Firefoksie oraz Operze...