/ Forside / Teknologi / Udvikling / Java Scripts / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
molokyle 5410
Klaudi 2799
smorch 2439
kim 1360
Harlekin 1134
bentjuul 984
gibson 800
severino 695
Random 675
10  konsulent.. 626
Javascript draggable
Fra : Ukendt


Dato : 03-03-10 18:29

Hej,

Nu har jeg lavet en javascript funktion som kan flytte et element. Der er to
problemer med den. Det første er, at når man har flyttet elementet og
sluppet det igen kan man ikke flytte det igen. Det andet er, at når man
flytter elementet kommer musen op i hjørnet af elementet.

Noter: oID er en genvej til document.getElementByID();mouse henter
mus-koordinaterne.

Kildekoden:

function draggable(id)
{
   /*
    * @id = element id
    */

   oID(id).onmousedown = function()
   {
      var startX = mouse("x");
      var startY = mouse("y");
      var offsetX = oID(id).style.left;
      var offsetY = oID(id).style.top;

      document.onmousemove = function()
      {
         oID(id).style.position = "fixed";
         oID(id).style.left = (offsetX + mouse("x")) + 'px';
         oID(id).style.top = (offsetX + mouse("y")) + 'px';


      };

      document.onmouseup = function()
      {
         document.onmousemove = "";
      };
   };
};

Mvh Anders


 
 
Birger Sørensen (03-03-2010)
Kommentar
Fra : Birger Sørensen


Dato : 03-03-10 21:00

Anders Mikkelsen sendte dette med sin computer:
> Hej,
>
> Nu har jeg lavet en javascript funktion som kan flytte et element. Der er to
> problemer med den. Det første er, at når man har flyttet elementet og sluppet
> det igen kan man ikke flytte det igen. Det andet er, at når man flytter
> elementet kommer musen op i hjørnet af elementet.
>
> Noter: oID er en genvej til document.getElementByID();mouse henter
> mus-koordinaterne.
>
> Kildekoden:
>
> function draggable(id)
> {
>    /*
>     * @id = element id
>     */
>
>    oID(id).onmousedown = function()
>    {
>       var startX = mouse("x");
>       var startY = mouse("y");
>       var offsetX = oID(id).style.left;
>       var offsetY = oID(id).style.top;
>
>       document.onmousemove = function()
>       {
>          oID(id).style.position = "fixed";
>          oID(id).style.left = (offsetX + mouse("x")) + 'px';
>          oID(id).style.top = (offsetX + mouse("y")) + 'px';
>
>
>       };
>
>       document.onmouseup = function()
>       {
>          document.onmousemove = "";
>       };
>    };
> };
>
> Mvh Anders

Kan ikke lige gennemskue, hvos dit problem er.
En ting er dog at
var offsetX = oID(id).style.left;
bør være
var offsetX = oID(id).offsetLeft;
og tilsvarende for Y/top.

Jeg vil også tro, at "musen" i hjørnet er det modsatte : elementet
flyttes, så musen er i hjørnet; det er ikke cursoren der flyttes..?

Umiddelbart, har du alting i een funktion, og gør tingene i document
objektet - undtaget på objektet der skal flyttes ( oID( id)), hvor du
overskriver mousedown.
I document.onmouseup(), mangler du at sætte funktionaliteten tilbage:
oID(id).onmousedown = draggable; // bemærk uden ()!

Birger





--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Ukendt (03-03-2010)
Kommentar
Fra : Ukendt


Dato : 03-03-10 21:44

"Birger Sørensen" <sdc@bbsorensen.com> skrev i meddelelsen
news:4b8ebfc6$0$278$14726298@news.sunsite.dk...
> Anders Mikkelsen sendte dette med sin computer:
>> Hej,
>>
>> Nu har jeg lavet en javascript funktion som kan flytte et element. Der er
>> to problemer med den. Det første er, at når man har flyttet elementet og
>> sluppet det igen kan man ikke flytte det igen. Det andet er, at når man
>> flytter elementet kommer musen op i hjørnet af elementet.
>>
>> Noter: oID er en genvej til document.getElementByID();mouse henter
>> mus-koordinaterne.
>>
>> Kildekoden:
>>
>> function draggable(id)
>> {
>> /*
>> * @id = element id
>> */
>>
>> oID(id).onmousedown = function()
>> {
>> var startX = mouse("x");
>> var startY = mouse("y");
>> var offsetX = oID(id).style.left;
>> var offsetY = oID(id).style.top;
>>
>> document.onmousemove = function()
>> {
>> oID(id).style.position = "fixed";
>> oID(id).style.left = (offsetX + mouse("x")) + 'px';
>> oID(id).style.top = (offsetX + mouse("y")) + 'px';
>>
>>
>> };
>>
>> document.onmouseup = function()
>> {
>> document.onmousemove = "";
>> };
>> };
>> };
>>
>> Mvh Anders
>
> Kan ikke lige gennemskue, hvos dit problem er.
> En ting er dog at
> var offsetX = oID(id).style.left;
> bør være
> var offsetX = oID(id).offsetLeft;
> og tilsvarende for Y/top.
>
> Jeg vil også tro, at "musen" i hjørnet er det modsatte : elementet
> flyttes, så musen er i hjørnet; det er ikke cursoren der flyttes..?
>
> Umiddelbart, har du alting i een funktion, og gør tingene i document
> objektet - undtaget på objektet der skal flyttes ( oID( id)), hvor du
> overskriver mousedown.
> I document.onmouseup(), mangler du at sætte funktionaliteten tilbage:
> oID(id).onmousedown = draggable; // bemærk uden ()!
>
> Birger
>
>
>
>
>
> --
> http://varmeretter.dk - billig, sund og hurtig mad
> http://bbsorensen.dk

Mange tak for dit svar. Tror ikke offsetleft og top er en god ide i denne
kontekst. HEr er en test-side med funktionen:
http://v3.agmweb.dk/admin/test.html , så du kan se problemet.

Mvh Anders


Birger Sørensen (03-03-2010)
Kommentar
Fra : Birger Sørensen


Dato : 03-03-10 22:00

Anders Mikkelsen forklarede:
> "Birger Sørensen" <sdc@bbsorensen.com> skrev i meddelelsen
> news:4b8ebfc6$0$278$14726298@news.sunsite.dk...
>> Anders Mikkelsen sendte dette med sin computer:
>>> Hej,
>>>
>>> Nu har jeg lavet en javascript funktion som kan flytte et element. Der er
>>> to problemer med den. Det første er, at når man har flyttet elementet og
>>> sluppet det igen kan man ikke flytte det igen. Det andet er, at når man
>>> flytter elementet kommer musen op i hjørnet af elementet.
>>>
>>> Noter: oID er en genvej til document.getElementByID();mouse henter
>>> mus-koordinaterne.
>>>
>>> Kildekoden:
>>>
>>> function draggable(id)
>>> {
>>> /*
>>> * @id = element id
>>> */
>>>
>>> oID(id).onmousedown = function()
>>> {
>>> var startX = mouse("x");
>>> var startY = mouse("y");
>>> var offsetX = oID(id).style.left;
>>> var offsetY = oID(id).style.top;
>>>
>>> document.onmousemove = function()
>>> {
>>> oID(id).style.position = "fixed";
>>> oID(id).style.left = (offsetX + mouse("x")) + 'px';
>>> oID(id).style.top = (offsetX + mouse("y")) + 'px';
>>>
>>>
>>> };
>>>
>>> document.onmouseup = function()
>>> {
>>> document.onmousemove = "";
>>> };
>>> };
>>> };
>>>
>>> Mvh Anders
>>
>> Kan ikke lige gennemskue, hvos dit problem er.
>> En ting er dog at
>> var offsetX = oID(id).style.left;
>> bør være
>> var offsetX = oID(id).offsetLeft;
>> og tilsvarende for Y/top.
>>
>> Jeg vil også tro, at "musen" i hjørnet er det modsatte : elementet flyttes,
>> så musen er i hjørnet; det er ikke cursoren der flyttes..?
>>
>> Umiddelbart, har du alting i een funktion, og gør tingene i document
>> objektet - undtaget på objektet der skal flyttes ( oID( id)), hvor du
>> overskriver mousedown.
>> I document.onmouseup(), mangler du at sætte funktionaliteten tilbage:
>> oID(id).onmousedown = draggable; // bemærk uden ()!
>>
>> Birger
>>
>>
>>
>>
>>
>> -- http://varmeretter.dk - billig, sund og hurtig mad
>> http://bbsorensen.dk
>
> Mange tak for dit svar. Tror ikke offsetleft og top er en god ide i denne
> kontekst. HEr er en test-side med funktionen:
> http://v3.agmweb.dk/admin/test.html , så du kan se problemet.
>
> Mvh Anders

Hvorfor ikke?
offsetLeft er afstanden i pixels.
style.left, er det der står i stylesheetet (hvis der står noget!).
Hvis jeg skriver { left :40em;}, regner dit med 40 pixels, mens mit
regner med den faktiske pixel afstand.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408849
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste