Notifikationer

Markér alle som læst Log ud

matz Nybegynder

20. april 2008 - 17:31 Der er 6 kommentarer og
2 løsninger

Flytte et element

Nogle der ved hvordan man laver et script så man kan flytte et element, f.eks ligesom der bruges til chat som N.dk ?

Synes godt om

w13 Novice

20. april 2008 - 17:33 #1

Mener du, at man skal kunne trække elementet et andet sted hen, eller skal man bare klikke der, hvor elementet skal placeres?

Synes godt om

matz Nybegynder

20. april 2008 - 17:34 #2

Man skal kunne klikke der hvor elementet skal hen til

Synes godt om

w13 Novice

20. april 2008 - 17:45 #3

Det burde du kunne gøre således:
--------------------------------
<script type="text/javascript">
// Variable som indeholder elementet, der skal flyttes
var oElement=document.getElementById("elementet");

// Variabler som indeholder X- og Y-koordinaterne
var X=Y=0;

// Tjekker hvilken browser der benyttes og derved hvilken teknik, vi skal bruge
var IE=document.all?true:false
if(!IE)document.captureEvents(Event.MOUSEMOVE)

// Finder cursorens koordinater
document.onmousemove=getMouseXY;

// Funktionen som henter koordinaterne
function getMouseXY(e){
if(IE){
X=event.clientX+document.body.scrollLeft;
Y=event.clientY+document.body.scrollTop;
}else{
X=e.pageX;
Y=e.pageY;
}
if(X<0){X=0}
if(Y<0){Y=0}
}

// Funktion som flytter elementet ved klik
document.body.onclick=function(){oElement.style.top=Y+"px";oElement.style.left=X+"px"}
</script>

<img position="position:absolute;top:50px;left:50px" id="elementet" src="element.jpg">

Synes godt om

w13 Novice

20. april 2008 - 17:48 #4

Eller mere kompakt:
------------------------------
<script type="text/javascript">
var oElement=document.getElementById("elementet");

var X=Y=0;
var IE=document.all?true:false;if(!IE)document.captureEvents(Event.MOUSEMOVE);document.onmousemove=getMouseXY;
function getMouseXY(e){if(IE){X=event.clientX+document.body.scrollLeft;Y=event.clientY+document.body.scrollTop}else{X=e.pageX;Y=e.pageY}if(X<0)X=0;if(Y<0)Y=0;}

document.body.onclick=function(){oElement.style.top=Y+"px";oElement.style.left=X+"px"}
</script>

<img position="position:absolute;top:50px;left:50px" id="elementet" src="element.jpg">

Synes godt om

matz Nybegynder

20. april 2008 - 17:53 #5

Hvordan fungere det så med at flytte "billedet" ? Jeg trykker på et tilfældigt område i browseren, men der sker intet.

Synes godt om

w13 Novice

20. april 2008 - 18:47 #6

Jo, der sker da det, at du får en fejlmeddelelse i JavaScript, som fortæller dig præcis, hvad der er galt. Og med den kan man rette scriptet til ´følgende, som er testet og fungerer:

<html>
<head></head>
<body onclick="moveElement()">

<img style="position:absolute;top:50px;left:50px" id="elementet" src="element.jpg">

<script type="text/javascript">
var oElement=document.getElementById("elementet");

var X=Y=0;
var IE=document.all?true:false;if(!IE)document.captureEvents(Event.MOUSEMOVE);document.onmousemove=getMouseXY;
function getMouseXY(e){if(IE){X=event.clientX+document.body.scrollLeft;Y=event.clientY+document.body.scrollTop}else{X=e.pageX;Y=e.pageY}if(X<0)X=0;if(Y<0)Y=0;}

function moveElement(){
oElement.style.top=Y+"px";
oElement.style.left=X+"px"
}
</script>

</body>
</html>

Synes godt om

matz Nybegynder

20. april 2008 - 20:39 #7

mange tak, det virker :)

Synes godt om

w13 Novice

20. april 2008 - 20:52 #8

:) Så lidt.

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	4	27/04/202620:09	I går 22:36
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS